web-dev-qa-db-ja.com

React警告：別のコンポーネントの関数本体の中からコンポーネントを更新することはできません

ReactでReduxとClass Componentsを使用しています。 Reduxストアに以下の2つの状態があります。

{ 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 />;
  }
}

以下のエラーが出ます。

警告：別のコンポーネントの関数本体内からコンポーネントを更新することはできません。

この警告を削除するにはどうすればよいですか？ここで何が間違っているのですか？

javascriptreactjsredux
8
Smith Dwayne

コードのいくつかの行にコメントしましたが、この問題は解決可能です:)この警告は、他のクラス内でreloadAppを同期的に呼び出しているために発生し、componentDidMount()の呼び出しを延期します。

import React from "react";

export default 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();
    // }
  }

  componentDidMount(props) {
    if (props) {
      props.reloadApp();
    }
  }

  render() {
    return <h1>This is a child.</h1>;
  }
}
0
w1n5rx