javascript - 在 React 中绕过 "Cannot update during existing state transaction"

Question

我有以下代码片段，它给了我一个无限循环和错误消息“无法在现有状态事务期间更新”

export const Child = (props) => {
  console.log("rendering child element");

  const retrieveValue = () => {
    return "dummy";
  }

  const val = retrieveValue();
  props.callback(val);

  return (
    <p>Hello World</p>
  )
}

class App2 extends Component {
  state = {
    property: ""
  }

  callback = (val) => {
    this.setState({property: val});
  }

  render() {
    return (
        <div>
          <h1>{this.state.property}</h1>
          <Child callback={this.callback}/>
        </div>
      );
  }
}

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

错误信息是有道理的，但让我困惑的是为什么将类组件更改为函数组件并使用 useState Hook 会解决问题。

const App = () => {
  const [property, setProperty] = React.useState("");

  const callback = (val) => {
    setProperty(val);
  }

  return (
      <div>
        <h1>{property}</h1>
        <Child callback={callback}/>
      </div>
    );
}

是否有任何其他解决方法可以让我在不使用功能组件的情况下达到相同的目的？

用例对我来说非常通用，子组件正在尝试初始化一些数据，并且在某些边缘情况下我想以某种方式公开该数据以供父组件或同级组件呈现。

stackblitz link

Answer 1

在渲染方法中，setState 方法在您调用“props.callback(val);”时被调用。所以它进入了一个无限循环。您可以在此处使用 shouldComponentUpdate 方法来停止重复渲染。

shouldComponentUpdate(nextProps, nextState) {
    return this.state.property != nextState.property;
}