1

尝试在 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
      });
    }
  }

不知道怎么回事，求指教，谢谢。

4

1 回答 1

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 />
}
于 2017-10-07T03:38:33.570 回答