ComponentWillMount 和 ComponentDidMount 未同步答案

【问题标题】：ComponentWillMount and ComponentDidMount not syncedComponentWillMount 和 ComponentDidMount 未同步
【发布时间】：2018-04-13 21:07:34
【问题描述】：

我正在制作一个反应应用程序。我需要调用ajax 从服务器获取数据并将这些数据填充到组件表的行中。我在componentWillMount 中调用ajax 并将响应存储在状态中。现在我的渲染获取了这个状态并填充它。不过我有几个问题：

将ajax 放入componentWillMount 中是否正确？
我的componentDidMount 没有得到在componentWillMount 中设置的state 的值。这意味着当componentDidMount 试图访问它时异步未完成。如何解决这个问题？设置async:false 确实是个糟糕的选择。
componentWillMount中可以使用什么东西？

【问题讨论】：

标签： reactjs

【解决方案1】：

在 componentWillMount 中放置 ajax 是否正确？

推荐的方法是将修改状态的初始网络请求放在 componentDidMount 内，因为理论上您的 ajax 请求可能会在 React 完成安装过程之前返回，这可能会导致您的状态被覆盖。

但是，实际上人们会同时使用这两种方法，因为上述情况绝不应该发生。

我的 componentDidMount 没有得到设置的状态值组件WillMount。这意味着异步未完成，而 componentDidMount 正在尝试访问它。

这是正确的行为。

如何解决这个问题？环境 async:false 确实是个糟糕的选择。

如果你停止它，那么它就不再是异步的了。

这里的最佳做法是显示加载指示器：

如果您在请求返回之前不想显示任何内容

您可以在render 中使用return null，这将阻止您的组件被添加到DOM。然后，您可以将其与标志状态属性结合使用，以确保一旦您的请求返回，组件就会被挂载，例如：

render() {
   if (!this.state.initialRequestHasCompleted) return (null);
   return (
      <div>
         ...
      </div>
   );
}

componentWillMount 中可以使用哪些东西？

【讨论】：

【解决方案2】：

你可以使用componentWillUpdate

componentWillUpdate() 在新渲染之前立即调用正在接收道具或状态。以此为契机在更新发生之前进行准备。不调用此方法用于初始渲染。

或shouldComponentUpdate，

shouldComponentUpdate() 在渲染新道具时被调用或状态正在接收。默认为真。这种方法不在初始渲染或使用 forceUpdate() 时调用。

更多信息docs

【讨论】：

那么我在哪里可以执行使用在componentWillMount中设置的状态的操作？是否应该在 componentWillUpdate 中执行操作？
是的，在componentWillUpdate() 中插入一个条件来检查异步操作的结果是否在状态内，如果是，您可以继续执行您的逻辑。
实际上没有“如果是这样”的空间。我需要以任何方式执行该操作。最好的方法是什么？
什么意思？ componentWillUpdate(nextProps, nextState) {if (nextState.dataFromAsync) {doSomething()}}