React 警告：Cannot update a component from inside the function body of a different component

小能豆

React 警告：Cannot update a component from inside the function body of a different component

javascript

我在 React 中使用 Redux 和类组件。Redux 存储中有以下两种状态。

{ spinner: false, refresh: false }

在父组件中，我有一个调度函数来改变这个状态。

class App extends React.Component {
  reloadHandler = () => {
    console.log("[App] reloadComponent");

    this.props.onShowSpinner();
    this.props.onRefresh();
  };

  render() {
    return <Child reloadApp={this.reloadHandler} />;
  }
}

在子组件中，我尝试像下面一样重新加载父组件。

class Child extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (somecondition) {
      // doing some redux store update
      props.reloadApp();
    }
  }

  render() {
    return <button />;
  }
}

我收到如下错误。

警告：无法从不同组件的函数体内更新组件。

如何消除此警告？我在这里做错了什么？

阅读 54

2024-06-07

共1个答案

小能豆

您看到的警告是因为您尝试从另一个组件 ( ) 的静态方法App中更新组件 ( )。这不是正确的方法，因为静态方法是用于根据 props 的变化更新组件的状态，而不是用于触发影响其他组件的操作。getDerivedStateFromProps``Child``getDerivedStateFromProps

App相反，您应该在方法之外处理触发父组件 ( ) 重新加载的逻辑getDerivedStateFromProps。您可以通过在方法中或从事件处理程序中直接调用reloadApp从父组件 ( ) 传递下来的函数来执行此操作。App``render

重构代码的方法如下：

class App extends React.Component {
  reloadHandler = () => {
    console.log("[App] reloadComponent");

    this.props.onShowSpinner();
    this.props.onRefresh();
  };

  render() {
    return <Child reloadApp={this.reloadHandler} />;
  }
}

class Child extends React.Component {
  componentDidMount() {
    // Check some condition and trigger the reload if needed
    if (somecondition) {
      this.props.reloadApp();
    }
  }

  render() {
    return <button />;
  }
}

在此示例中：

在App组件中，该函数作为 propreloadHandler传递给组件。Child
在Child组件中，该reloadHandler函数在组件挂载时（在中componentDidMount）被调用。您也可以从事件处理程序或其他生命周期方法中调用它，具体取决于您的特定要求。

reloadHandler通过直接从组件的生命周期方法中调用该函数Child，您可以避免有关从不同组件的函数体中更新组件的警告。

2024-06-07