Réagir: pourquoi le composant enfant ne se met pas à jour lorsque le prop change

Pourquoi, dans l'exemple de pseudo-code suivant, Child ne s'affiche pas à nouveau lorsque Container change foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Même si j'appelle forceUpdate()après avoir modifié la valeur dans Container, Child affiche toujours l'ancienne valeur.

Mettez à jour l'enfant pour que l'attribut «clé» soit égal au nom. Le composant sera rendu à chaque fois que la clé change.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Parce que les enfants ne sont pas rendus si les accessoires du parent changent, mais si son STATE change :)

Ce que vous montrez est le suivant: https://facebook.github.io/react/tips/communicate-between-components.html

Il transmettra les données du parent à l'enfant via des accessoires, mais il n'y a pas de logique de rendu.

Vous devez définir un état pour le parent, puis rendre l'enfant à l'état de changement de parent. Cela pourrait aider. https://facebook.github.io/react/tips/expose-component-functions.html

J'ai eu le même problème. C'est ma solution, je ne suis pas sûr que ce soit la bonne pratique, dites-moi si non:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD: Vous pouvez maintenant faire la même chose en utilisant React Hooks: (uniquement si le composant est une fonction)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Selon la philosophie de React, le composant ne peut pas changer ses accessoires. ils doivent être reçus du parent et doivent être immuables. Seul le parent peut changer les accessoires de ses enfants.

belle explication sur l' état vs les accessoires

aussi, lisez ce fil Pourquoi ne puis-je pas mettre à jour les accessoires dans react.js?

Vous devez utiliser la setStatefonction. Sinon, l'état ne sauvegardera pas votre modification, quelle que soit la manière dont vous utilisez forceUpdate.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Votre code ne semble pas valide. Je ne peux pas tester ce code.

Lors de la création de composants React à partir de functionset useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Ça ne marche pas

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Cela fonctionne (ajout d'une clé)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Confirmé, l'ajout d'une clé fonctionne. J'ai parcouru la documentation pour essayer de comprendre pourquoi.

React veut être efficace lors de la création de composants enfants. Il ne rendra pas un nouveau composant s'il est identique à un autre enfant, ce qui accélère le chargement de la page.

L'ajout d'une clé force React à rendre un nouveau composant, réinitialisant ainsi l'état pour ce nouveau composant.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Utilisez la fonction setState. Alors tu pourrais faire

       this.setState({this.state.foo.bar:123}) 

à l'intérieur de la méthode d'événement handle.

Une fois que l'état est mis à jour, il déclenchera des modifications et un nouveau rendu aura lieu.

Vous devriez probablement faire de l'enfant un composant fonctionnel s'il ne conserve aucun état et restitue simplement les accessoires, puis l'appelle depuis le parent. Une alternative à cela est que vous pouvez utiliser des hooks avec le composant fonctionnel (useState) qui provoquera le nouveau rendu du composant sans état.

Vous ne devez pas non plus modifier les propas car elles sont immuables. Maintenir l'état du composant.

Child = ({bar}) => (bar);

Je rencontrais le même problème. J'avais un Tooltipcomposant qui recevait un showTooltipaccessoire, que je mettais à jour sur un Parentcomposant en fonction d'une ifcondition, il était mis à jour dans le Parentcomposant mais le Tooltipcomposant ne rendait pas.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

L'erreur que je faisais est de déclarer showTooltipcomme un let.

J'ai réalisé ce que je faisais mal, je violais les principes du fonctionnement du rendu, le remplacer par des crochets a fait le travail.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

définir les accessoires modifiés dans mapStateToProps de la méthode de connexion dans le composant enfant.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

Dans mon cas, le canal de channelList est mis à jour donc j'ai ajouté chanelList dans mapStateToProps

export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

cet exemple utilise useEffectpour changer d'état lors d'un propschangement.