时间戳

首页 > 解决方案 > React 中“无法在现有状态转换期间更新（例如在`render`中）”错误的解决方案是什么？

reactjs - React 中“无法在现有状态转换期间更新（例如在`render`中）”错误的解决方案是什么？

问题描述

我正在尝试编写一个 React 应用程序，其中父组件将回调函数传递给子组件，调用回调函数并传递一个参数，并更新父组件中的状态变量，将其设置为参数。但我一直遇到这个错误：

警告：在现有状态转换期间无法更新（例如在 内render）。渲染方法应该是 props 和 state 的纯函数。

我在这里找到了有关此问题的其他问题，并阅读了有关错误含义的解释，但是有关如何解决该错误的所有解释都涉及更复杂的组件结构，因为我才刚刚开始与反应。我希望有人能告诉我如何修改这个简单的组件结构来做我想做的事，同时避免这个错误（我在 codepen.io 环境中这样做，如果这很重要的话）：

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { word: 'hello' }
  }

  myCallback = (dataFromChild) => {
    this.setState({ word: dataFromChild })
  }

  render() {
    return (
      <div>
        <p>{this.state.word}</p>
        <Child callbackFromParent={this.myCallback} />
      </div>
    )
  }
}

function Child(props) {
  return (
    <div>
      <button onClick={props.callbackFromParent('goodbye')}>Say goodbye</button>
    </div>
  )
}

// ========================================

ReactDOM.render(<Parent />, document.getElementById('root'));

标签： reactjs

解决方案

添加一个()for myCallback 函数

myCallback = dataFromChild => () => {

尝试文本演示：

function Child(props) {
  return (
    <div>
      <button onClick={props.callbackFromParent("goodbye")}>Say goodbye</button>
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { word: "hello" };
  }

  myCallback = dataFromChild => () => {
    this.setState({ word: dataFromChild });
  };

  render() {
    return (
      <div>
        <p>{this.state.word}</p>
        <Child callbackFromParent={this.myCallback} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

推荐阅读