reactjs-从外部React更新组件状态(在服务器响应上)

我正在学习React。 目前,我有几个components链接为父子,通过回调可以轻松地在它们之间进行通信。

我有一张桌子(反应成分)和一个小的模态ajax形式(没有反应)。 当我从服务器收到响应(一项)时,我想将该项添加到表中。

我的主要问题是,是否有可能从外部响应(在这种情况下为服务器响应)触发组件状态更改?

Axxiss asked 2020-06-24T19:26:01Z
3个解决方案
72 votes

您可以在组件外部触发组件状态更改吗?

是。 这是一个简单的例子

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

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

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

globalVar.callback(data);

或者,对于更强大的功能,请使用自定义事件或订阅

enjoylife answered 2020-06-24T19:26:33Z
2 votes

props状态的最佳实践是保存真正的内部componentWillReceiveProps数据,而不是外部组件感兴趣的数据。 如果您必须从新的外部数据中更改组件,请使用props,只需从外部更改props,组件重新渲染将对更改做出反应。

基于新的props,组件可以在重新渲染时使用它们,或像在构造函数中一样更改状态。 此任务的正确位置是componentWillReceiveProps,使用此方法,您可以从新道具更改状态而不会陷入永恒循环。

更新:从React 16.3起,不赞成使用componentWillReceiveProps,并且必须使用getDerivedStateFromProps,以改进对不良用例和副作用的检测。 参见[https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops]

Rogelio answered 2020-06-24T19:27:04Z
0 votes

本文中有一个更新的版本介绍了如何影响状态,这是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从子组件访问可以获取/设置状态的方法。

原始的代码笔仅尝试读取状态,因此我也将其扩展为可以写入。诀窍是一种新方法

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

看那边。

centurian answered 2020-06-24T19:27:46Z
translate from https://stackoverflow.com:/questions/31856712/update-component-state-from-outside-react-on-server-response