反应：componentWillMount 中的 setState 出现问题答案

【问题标题】：React : trouble with setState in componentWillMount反应：componentWillMount 中的 setState 出现问题
【发布时间】：2018-03-18 21:12:59
【问题描述】：

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

警告：setState(...)：只能更新挂载组件。这通常意味着您在服务器上的 componentWillMount() 之外调用了 setState()。这是无操作的。

这里是sn-ps的代码：

  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
      });
    }
  }

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

【问题讨论】：

为什么不在 componentDidMount 中进行 ajax 调用？您必须知道建议在 componentDidMount 方法中发出 ajax 请求，因为 this.setState 将重新渲染组件，如果您在 componentWillMount 中发出 ajax 请求，则组件不会被渲染并且不会有任何更新。
上述评论是正确的，但要解决您的问题，只需在定义数据时执行 setState，即if(data) this.setState({product_data: data })。这确保您不会尝试将未定义的值设置为状态
@Kenji，在componentWillMount中获取数据的原因是服务器端渲染。当呈现给用户时，我需要准备好整个页面。
@Komolafe，我检查了数据并确定它们是好的。只是想知道为什么我仍然收到警告。
页面没有准备好，因为componentWillMount在安装组件之前执行，我的意思是，执行该方法时页面是空白的。

标签： reactjs nextjs

【解决方案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 />
}

【讨论】：