Question

我在尝试获取componentWillMount中的数据以获取服务器端渲染时收到警告：

警告：setState（...）：只能更新安装组件。这通常意味着您在服务器上的componentWillMount（）之外调用了setState（）。这是一个无操作。

以下是代码段：

  async fetchProductsSSR() {
    var response = await fetch(BACKEND_URL + '/products/', {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
    });

    var result = false;
    var data = await response.json();
    console.log(response.status);

    if (response.status === 200) {
    }
    else {
      data = [];
    }
    return data;
  }

  async componentWillMount() {
    if (!process.browser) {
      var data = await this.fetchProductsSSR();
      this.setState({
        product_data: data
      });
    }
  }

在调用this.setState之前，我确定数据是正确的。

如果硬编码JSON数据，一切都很好

  async componentWillMount() {
    if (!process.browser) {
   // var data = await this.fetchProductsSSR();

      var data = [
        {
        "name": "Test",
        }
      ]

      this.setState({
        product_data: data
      });
    }
  }

我不知道什么是错的，请指教，谢谢。

Answer 1

我同意Kenji的评论......你必须在ComponentDidMount中做到这一点......

https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

如果要显示加载消息，可以设置加载状态并在渲染函数中使用该条件，如...

constructor(){
  this.state={loading:true}
}
ComponentDidMount(){
 //do your async thing and change the state to loading:false
}
render(){
   if(this.state.loading)
   return <YourMessage />

   return <Something />
}

React：componentWillMount中的setState出现问题

1 个答案: