React Avertissement: impossible de mettre à jour un composant depuis le corps de fonction d'un autre composant

Question

J'utilise Redux avec des composants de classe dans React. Avoir les deux états ci-dessous dans le magasin Redux.

{ spinner: false, refresh: false }

Dans les composants parents, j'ai une fonction de répartition pour modifier ces états.

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

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

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

Dans Child Component, j'essaye de recharger le composant parent comme ci-dessous.

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

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

J'obtiens une erreur comme ci-dessous.

Avertissement: impossible de mettre à jour un composant à partir du corps de fonction d'un autre composant.

Comment supprimer cet avertissement? Qu'est-ce que je fais mal ici?

Answer 1

Commenté quelques lignes de code, mais ce problème peut être résolu :) Ces avertissements se produisent parce que vous appelez de manière synchrone reloadApp dans une autre classe, différez l'appel à 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>;
  }
}