javascript - 无法从main调用类函数， "is not a function"错误

Question

我正在尝试通过创建一个使用 API 请求获取数据的简单天气应用来学习 React。该 api 需要一个可以通过另一个函数获得的位置键。这意味着我必须返回然后将 key 传递给下一个函数，但我似乎在执行此操作时遇到了一些麻烦!

TypeError: _LocationKey__WEBPACK_IMPORTED_MODULE_3__.default.setLocation is not a function" is the error i am given when I attempt to run.

我假设我在调用函数的方式以及实际类的结构方面犯了错误。任何帮助，将不胜感激!

//The main app
function App() {

  //runs function to set api location key
  new LocationKey();
  LocationKey.setLocation('winnipeg');

  //uses get location key to set weatherData
  new Weather();
  Weather.getWeatherData(LocationKey.getLocation());

  //displays location and weather information 
  return (
    <div className="body">
          <LocationKey/>
          <Weather/>
    </div>
  );
}

//The location key class
export class LocationKey extends Component{

  state = {
    locations: []
  }

  setLocation(name) {
    axios.get('http://dataservice.accuweather.com/locations/v1/cities/search?apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&q=' + name + '&language=en&details=false')
      .then(res => {
        const locations = res.data;
        this.setState({ locations });
      })
  }

  getLocation(){
      return this.state.locations[0].Key;
  }


  render() {
    return (
      <ul>
        { this.state.locations.slice(0, 1).map(location => <li>{location.EnglishName}</li>)}
      </ul>
    )
  }
}
export default LocationKey

//Weather Class
export class Weather extends Component{

  state = {
    weatherData: []
  }

  //issues command to find weather data from api using location key
  getWeatherData(location) {
    axios.get('http://dataservice.accuweather.com/forecasts/v1/daily/1day/' + location + '?apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&language=en&details=false&metric=true%20HTTP/1.1')
      .then(res => {
        const weatherData = res.data;
        this.setState({ weatherData });
      })
  }

  render() {
    return (
      <ul>
        { this.state.weatherData.slice(0, 2).map(weather => <li>{weather.Headline.Text}</li>)}
        { this.state.weatherData.slice(0, 2).map(weather => <li>{weather.Headline.Category}</li>)}
        { this.state.weatherData.slice(0, 2).map(weather => <li>{weather.DailyForecasts.Maximum.Value}</li>)}
        { this.state.weatherData.slice(0, 2).map(weather => <li>{weather.DailyForecasts.Minimum.Value}</li>)}
      </ul>
    )
  }
}
export default Weather

Answer 1

问题

问题在于这一行:

LocationKey.setLocation('winnipeg');

您实例化了 LocationKey 的一个新实例，但是看到 LocationKey 不是单例并且 setLocation 不是静态方法，您正在尝试以静态方式调用实例方法。

另一个潜在的问题是这一行:

Weather.getWeatherData(LocationKey.getLocation());

正如我上面所说，您实例化了一个新的 Weather 实例，但由于它没有做任何事情也没有分配给任何东西，它会立即被丢弃，所以下面这行对它没有影响。

解决方案

我建议让 App 成为它自己的组件并让它包含位置的状态，然后将位置数组传递给每个组件。

class App extends React.Component {

  state = {
    locations: ['winnipeg'],
    locationInput: ''
  };

  render() {
    return ( 
      <div>
        <input value={this.state.locationInput} onChange={e => this.setState({ locationInput: e.target.value })} />
        <button onClick={this.handleAddLocation}>add to locations</button>
        <Weather locations={this.state.locations} />
        <LocationKey locations={this.state.locations} />
      </div>
    )
  }
  
  handleAddLocation = () => {
    if (this.state.locationInput === '') return;
    this.setState({
      locationInput: '',
      locations: [...this.state.locations, this.state.locationInput]
    });
  };
}

class Weather extends React.Component {
  static defaultProps = {
    locations: []
  }

  render () {
    return (
      <div>
        <h2>Weather Component</h2>
        <h3>Locations provided:</h3>
        <span>{this.props.locations.join(', ')}</span>
      </div>
    );
  }
}


class LocationKey extends React.Component {
  static defaultProps = {
    locations: []
  }

  render () {
    return (
      <div>
        <h2>LocationKey Component</h2>
        <h3>Locations provided:</h3>
        <span>{this.props.locations.join(', ')}</span>
      </div>
    );
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app"></div>

在上面的代码片段中，我开始向您展示如何使用 props 并将其提供给子组件。

我希望这可以帮助和澄清您一直遇到的一些问题