Re-gengiv reaktionskomponent, når dens rekvisitter ændres

Forestil dig, at du har et React og Redux-projekt med to komponenter, en forælder og et barn.

Den overordnede komponent videregiver nogle rekvisitter til den underordnede komponent. Når den underordnede komponent modtager disse rekvisitter, skal den kalde en Redux-handling, som ændrer nogle af de rekvisitter, der blev sendt fra forældren asynkront.

Her er de to komponenter:

Forældrekomponent

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()} )

Barnekomponent

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()} ) } }

Den redux-storeopdateres korrekt, men underordnet komponent gengives ikke igen.

Det er normalt ikke ansvaret for Childat udfylde dataene. I stedet skal den modtage data, der allerede er udarbejdet af Parent. Rekvisitter opdateres også automatisk.

Alligevel kan det være nyttigt at opdatere og manipulere data fra en Childkomponent, især når Redux er involveret.

React udfører sandsynligvis overfladiske sammenligninger og gengives muligvis ikke igen, selvom staten ændrer sig klart.

Som en løsning kan du gøre dette i mapStateToProps:

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