React类构造函数中调用getWeather方法报错求助

首先看你代码里的核心问题：在constructor中，你已经通过this.getWeather = this.getWeather.bind(this)把方法绑定到了类实例，但紧接着调用getWeather()是错误的——这个写法是在当前作用域（也就是constructor函数内部）查找名为getWeather的变量，而非调用类实例上的方法，所以会抛出getWeather is not defined的错误。

正确的调用方式是使用this.getWeather()，因为你已经把绑定后的方法挂载到了类实例的this上。另外还有几个细节可以优化，避免后续潜在问题：

修正后的完整代码 #

class FiveDayWeather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      days: []
    };
    // 先把方法绑定到类实例
    this.getWeather = this.getWeather.bind(this);
    // 通过this调用绑定后的类方法
    this.getWeather();
    console.log(this.state);
  }

  getWeather() {
    axios.get(URL)
      // 使用箭头函数确保回调里的this指向类实例（避免额外绑定）
      .then((response) => {
        this.setState({ 
          days: response.data, // 通常要取response.data而非整个response对象
          isLoaded: true
        });
      })
      // 建议添加错误捕获逻辑
      .catch((error) => {
        this.setState({
          isLoaded: true,
          error
        });
      });
  }

  render() {
    const { error, isLoaded, days } = this.state;
    if (error) {
      return <div>加载失败: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>加载中...</div>;
    } else {
      return <div>Placeholder</div>;
    }
  }
}

关键说明 #

• 必须通过this调用类方法：在类的constructor内部，类的方法默认不会在当前作用域暴露，必须通过实例对象this来访问，所以调用时一定要写this.getWeather()。
• 简化绑定的小技巧：如果你不想手动写bind，可以把getWeather定义成类的箭头函数属性，这样会自动绑定实例的this，代码更简洁：

  // 直接用箭头函数定义类方法，无需在constructor手动绑定
  getWeather = () => {
    axios.get(URL)
      .then((response) => {
        this.setState({ days: response.data });
      });
  }
  

  这种写法下，你可以直接在constructor里调用this.getWeather()，省去手动绑定的步骤。

内容的提问来源于stack exchange，提问作者adamscott