Re-Render React Component όταν αλλάζει το Props του

Φανταστείτε ότι έχετε ένα έργο React και Redux με δύο στοιχεία, έναν γονέα και ένα παιδί.

Το γονικό στοιχείο μεταδίδει ορισμένα στηρίγματα στο θυγατρικό στοιχείο. Όταν το θυγατρικό στοιχείο λαμβάνει αυτά τα στηρίγματα, θα πρέπει να καλεί κάποια ενέργεια Redux που αλλάζει μερικά από τα στηρίγματα που μεταβιβάστηκαν από τον γονέα ασύγχρονα.

Εδώ είναι τα δύο συστατικά:

Γονικό συστατικό

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

Παιδικό συστατικό

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

Η redux-storeενημερώνεται σωστά, αλλά το στοιχείο παιδί δεν εκ νέου παρέχουν.

Συνήθως δεν είναι ευθύνη του Childνα συμπληρώσει τα δεδομένα. Αντ 'αυτού, θα πρέπει να λαμβάνει δεδομένα που έχουν ήδη προετοιμαστεί από το Parent. Επίσης, τα στηρίγματα ενημερώνονται αυτόματα.

Ωστόσο, μπορεί να είναι χρήσιμο να ενημερώσετε και να χειριστείτε δεδομένα από ένα Childστοιχείο, ειδικά όταν εμπλέκεται το Redux.

Το React εκτελεί πιθανώς ρηχές συγκρίσεις, και μπορεί να μην επαναπροσδιοριστεί ακόμα κι αν η κατάσταση αλλάζει σαφώς.

Ως λύση, μπορείτε να το κάνετε αυτό mapStateToProps:

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