Javascript Can'；t从“main”调用类函数；不是一个函数；错误

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

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

//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

//主应用程序
函数App（）{
//运行函数以设置api位置键
新位置键（）；
LocationKey.setLocation（'winnipeg'）；
//使用get location键设置天气数据
新天气（）；
getWeather.getWeatherData（LocationKey.getLocation（））；
//显示位置和天气信息
返回(
);
}
//位置键类
导出类LocationKey扩展组件{
状态={
地点：[]
}
设置位置（名称）{
axios.get（）http://dataservice.accuweather.com/locations/v1/cities/search?apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&q=“+name+”&language=en&details=false”）
。然后（res=>{
常数位置=分辨率数据；
this.setState（{locations}）；
})
}
getLocation（）{
返回此.state.locations[0]。键；
}
render（）{
返回(

{this.state.locations.slice（0，1）.map（location=>
{location.EnglishName}
）}

)
}
}
导出默认位置键
//气象课
导出类天气组件{
状态={
天气数据：[]
}
//发出命令，使用位置键从api查找天气数据
getWeatherData（位置）{
axios.get（）http://dataservice.accuweather.com/forecasts/v1/daily/1day/“+location+”？apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&language=en&details=false&metric=true%20HTTP/1.1'）
。然后（res=>{
常数weatherData=分辨率数据；
this.setState（{weatherData}）；
})
}
render（）{
返回(

{this.state.weatherData.slice（0,2）.map（weather=>
{weather.Headline.Text}
）}
{this.state.weatherData.slice（0,2）.map（weather=>
{weather.Headline.Category}
）}
{this.state.weatherData.slice（0,2）.map（weather=>
{weather.DailyForecasts.Maximum.Value}
）}
{this.state.weatherData.slice（0,2）.map（weather=>
{weather.dailyForecases.Minimum.Value}
）}

)
}
}
导出默认天气

问题 问题在于这一行：

LocationKey.setLocation('winnipeg');

Weather.getWeatherData(LocationKey.getLocation());

您实例化了

LocationKey

的一个新实例，但鉴于

LocationKey

不是一个单例，而且

setLocation

不是一个静态方法，您正在尝试以静态方式调用一个实例方法

另一个潜在问题是这一行：

LocationKey.setLocation('winnipeg');

Weather.getWeatherData(LocationKey.getLocation());

如上所述，您实例化了一个新的

天气实例，但由于它没有做任何事情，也没有分配给任何对象，它会立即被丢弃，因此下面的一行对它没有影响

解决方案
我建议让应用程序成为自己的组件，并让它包含位置的状态，然后将位置数组传递给每个组件


类应用程序扩展了React.Component{
状态={
地点：[“温尼伯”]，
位置输入：“”
};
render（）{
报税表（
this.setState（{locationInput:e.target.value}）}/>
添加到位置
)
}
handleAddLocation=（）=>{
如果（this.state.locationInput==''）返回；
这是我的国家({
位置输入：“”，
位置：[…this.state.locations，this.state.locationInput]
});
};
}
类。组件{
静态defaultProps={
地点：[]
}
渲染（）{
返回(
天气分量
提供的地点：
{this.props.locations.join（'，'）}
);
}
}
类LocationKey扩展了React.Component{
静态defaultProps={
地点：[]
}
渲染（）{
返回(
位置关键部件
提供的地点：
{this.props.locations.join（'，'）}
);
}
}
ReactDOM.render（，
document.getElementById（'app'）
);

新位置键（）；LocationKey.setLocation（'winnipeg'）是问题所在。您正在实例化LocationKey的一个新实例，但随后尝试调用一个非静态函数，这是无效的。相反，您可能应该使用道具并将值传递给component@DerekPollard你能给我举个例子说明我是如何做到的吗？（我昨天开始使用react，所以我对道具的工作原理知之甚少）是的，现在试着写一个例子我很抱歉。这里发生了很多事情，似乎你错过了很多反应的基本原理。我建议你浏览一下他们的网站tutorials@DerekPollard巧合的是，有一个视频教程，讲的是一个家伙使用相同的api服务，做的和我想做的完全一样的事情，哈哈，非常有用，而且速度非常快response@blujay-很高兴我能帮忙！