渲染Dom之前的React-Complete AJAX请求...带回调

Question

我环顾四周，看到了一些有用的答案，但没有任何帮助我的问题。我的相关代码：

基本上我的想法是让onSuccess成为一个回调函数，这样我就可以在用这些道具调用子组件GameBoard之前完成更新状态...任何想法如何解决这个问题而不搞乱异步属性？

Answer 1

在render()内部，您需要返回基于标志有条件渲染的中间加载消息（或微调器组件）。完成后，让你的ajax请求切换该标志。

一个非常基本的例子......

render() {
  if (!this.state.didFetch) return <div>loading...</div>;
  return <GameBoard />;
}

一旦你的ajax请求更新状态，render（）方法将自动再次被调用，使用props渲染GameBoard。有关更多信息，请查看组件生命周期文档 - 特别是有关更新... "An update can be caused by changes to props or state"

的部分

作为旁注，由于React的虚拟DOM概念，将jQuery与React一起使用通常被认为是不好的做法。如果您没有在其他地方使用jQuery，您可能需要考虑replacing it completely with axios。