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

【问题标题】：Update component state from outside React (on server response)从 React 外部更新组件状态（在服务器响应上）
【发布时间】：2015-10-29 15:47:19
【问题描述】：

我正在学习 React。目前我有几个components 作为父子链接，它们之间的通信很容易通过回调完成。

我有一个 table（反应组件）和一个小的模态 ajax form（没有反应）。当我收到来自服务器的响应（一个项目）时，我想将该项目添加到表格中。

我的主要问题是，是否可以从外部反应（在本例中为服务器响应）触发组件状态更改？

【问题讨论】：

有时您只需再次调用 render 即可。渲染(, document.getElementById('shop'))

标签： reactjs

【解决方案1】：

你能在组件外触发组件状态改变吗？

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

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

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

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

globalVar.callback(data);

或者对于更强大的东西，使用custom event or subscription

【讨论】：

太棒了！我让它在全局变量上保存反应对象引用，但感觉不对。这样干净多了。
@Jarzka 这是一个任意名称。可能是fooBar 而不是callback
如何设置全局？
reactClassComponentInstance.setState(data)，有没有办法从反应上下文之外的另一个js模块调用方法？
多么精彩。现在我可以重构遗留应用程序，用 React 部分替换它，而不需要完全重写。谢谢！

【解决方案2】：

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

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

更新：从 react 16.3 开始，componentWillReceiveProps 已被弃用，必须使用 getDerivedStateFromProps，改进了对不良用例和副作用的检测。见https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

【讨论】：

我想知道这将如何工作？ prop 值会在 react 之外发生变化，react 如何知道是否需要检查更改并进行重新渲染？
props 更改在父组件中，并且新的 props、setState 或 forceUpdate 在对组件的刷新周期做出反应时触发
我认为您误解了这个问题。他的意思是触发react之外的变化。不在父组件中。查看接受的答案。
你是对的，我没看懂这个问题，我阅读了外部组件，而不是完全在反应之外

【解决方案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.

【讨论】：