Rendu du composant React lorsque ses accessoires changent

Imaginez que vous ayez un projet React et Redux avec deux composants, un parent et un enfant.

Le composant parent transmet certains accessoires au composant enfant. Lorsque le composant enfant reçoit ces props, il doit appeler une action Redux qui modifie certains des props qui ont été passés du parent de manière asynchrone.

Voici les deux composants:

Composant parent

class Parent extends React.Component { getChilds(){ let child = []; let i = 0; for (let keys in this.props.home.data) { child[i] = (  ); i++; if (i === 6) break; } return Rows; } render(){ return ( 

I am gonna call my child

{this.getChilds()} )

Composant enfant

class Child extends React.Component { componentDidMount(){ if(this.props.data.items.length === 0){ // calling an action to fill this.props.data.items array with data this.props.getData(this.props.data.id); } } getGrandSon(){ let grandSons = []; if(this.props.data.items.length > 0){ grandSons = this.props.data.items.map( item => ); } return grandSons; } render(){ return ( 

I am the child component and I will call my own child

{this.getGrandSon()} ) } }

Le redux-storeest mis à jour correctement, mais le composant enfant n'est pas rendu à nouveau.

Il n'est normalement pas de la responsabilité du Childde remplir les données. Au lieu de cela, il devrait recevoir des données déjà préparées par le Parent. De plus, les accessoires sont automatiquement mis à jour.

Néanmoins, il peut être utile de mettre à jour et de manipuler les données d'un Childcomposant, en particulier lorsque Redux est impliqué.

React effectue probablement des comparaisons superficielles et peut ne pas être rendu même si l'état change clairement.

Pour contourner ce problème, vous pouvez le faire dans mapStateToProps:

const mapStateToProps = state => { return { id: state.data.id, items: state.data.items } }