ComponentWillMount和ComponentDidMount未同步

Question

我正在做一个反应应用程序。我需要进行ajax调用以从服务器获取数据，并在我的组件表的行中填充此数据。我在ajax中进行componentWillMount调用并将响应存储在州内。现在我的渲染器获取了这个状态并填充它。我有几个问题：

1. 我是否正确将ajax放入componentWillMount？

2. 我的componentDidMount未获得state中componentWillMount设置的值componentDidMount。这意味着async:false尝试访问异步时异步未完成。怎么解决这个？设置componentWillMount确实是一个糟糕的选择。

3. 在{{1}}中可以使用的是什么？

Answer 1

1. 是的，在渲染之前调用componentWillMount一次。这是获取数据的地方。

2. 当组件完成渲染时，虽然异步操作尚未完成，但componentDidMount被调用，因此您的结果为空。

您可以使用componentWillUpdate

  在新的渲染之前立即调用

componentWillUpdate()   正在收到道具或国家。以此为契机   在更新发生之前执行准备。不调用此方法   用于初始渲染。

或shouldComponentUpdate，

  在渲染新道具之前调用

shouldComponentUpdate()   或正在收到国家。默认为true。这种方法不是   调用初始渲染或使用forceUpdate（）时。

1. 这是一个广泛的问题，基本上是从行动中获取数据，调用api等。

docs

中的更多信息

Answer 2

  

我是否正确将ajax放在componentWillMount中？

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

然而，在实践中，人们使用两者，因为上述情况永远不会发生。

  

我的componentDidMount没有得到设置的状态值   componentWillMount。这意味着异步不完整   componentDidMount正在尝试访问它。

这是正确的行为。

  

如何解决这个问题？设置   async：false确实是一个糟糕的选择。

如果你停止它，它就不再是异步。

此处的最佳做法是显示加载指标：

1. 将loading属性添加到state
2. 将其设置为true请求
上方的fetch
3. 在.then内，.catch将loading设为false
4. 在render内检查data是否已到达 - 如果未显示loading指示符

如果您不希望在请求回来之前显示任何内容

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

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

  

在componentWillMount中可以使用的是什么？

What is the purpose of having functions like componentWillMount in React.js?