Question

我正在学习React。目前我有几个components链接为亲子，通过回调可以很容易地进行通信。

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

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

Answer 1

您是否可以在组件外触发组件状态更改？

是的。这是一个简单的例子

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

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

然后当您的ajax'd响应返回时，您可以使用返回的数据

触发事件

globalVar.callback(data);

或者对于更强大的内容，请使用custom event or subscription

Answer 2

component州的最佳做法是保留真正的内部state数据，而不是组件之外的数据。如果您必须使用props更改新外部数据中的组件，只需从外部更改props，组件重新呈现就会对更改做出反应。

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

UPDATE：from react 16.3不推荐使用componentWillReceiveProps，必须使用getDerivedStateFromProps，改进了对不良用例和副作用的检测。见https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 3

在article上有一个更新版本的关于如何影响状态的示例，这是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仅尝试读取状态，因此我也将其扩展为也可以写入。诀窍是一种新方法

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

see there。

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

3 个答案: