从外部更新组件状态React（在服务器响应上）

Question

我正在学习React。 目前，我将几个components链接为父子，通过回调可以轻松地进行通信。

我有一个表 （反应组件）和一个小模态ajax 形式 （没有反应）。 当我从服务器收到响应 （项目）时，我想将项目添加到表中。

我的主要问题是，是否有可能从外部响应 触发组件状态更改 （在这种情况下是服务器响应）？

Answer 1

可以在组件外触发组件状态更改吗？

是。 这是一个简单的例子

在您的react组件中设置一个全局可用的闭包，它将在触发该函数时更新它的状态。

componentDidMount(){
 globalVar.callback = (data) => {
    // `this` refers to our react component
    this.setState({...});     
  };
}

然后，当您的ajax响应返回时，您可以使用返回的数据触发事件

globalVar.callback(data);

或者对于更健壮的东西，使用自定义事件或订阅

Answer 2

component状态最佳实践是保存真正的内部state数据，而不是组件外部的兴趣。 如果您必须从新的外部数据使用props更改组件，只需从外部更改props ，组件重新呈现将对更改做出反应。

基于新props ，组件可以在重新渲染时使用它们，或者像构造函数中那样更改状态。 此任务的正确位置在componentWillReceiveProps ，在此方法中，您可以从新道具更改状态而无需进入永久循环。

更新：来自react 16.3 componentWillReceiveProps已弃用，必须使用getDerivedStateFromProps，并改进了对不良用例和副作用的检测。 请参阅https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 3

有一个更新版本的如何影响本文的状态和它的codepen示例。

看来这部分代码

  render() {
    return (
      <div onClick={this.increment}>
        <div>Parent Value - {this.state.counter} - Click to increment</div>
        <ChildComponent ref={(childComponent) => {window.childComponent = childComponent}}/>
      </div>
    )
  }

诀窍。

我们使用子组件的引用填充window对象 - 如果我们有 - 传递属性，如ref={(childComponent) => {window.childComponent = childComponent} 。 现在window.childComponent访问来自子组件的方法，可以获取/设置状态。

原始的codepen只尝试读取状态，因此我将其扩展为write。 诀窍是一种新方法

setStateExt = (state) => {
    this.setState(this.state = state);
  }

看到那里 。