הפוך מחדש את רכיב התגובה כאשר אביזריו משתנים

דמיין שיש לך פרויקט 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.

התגובה מבצעת ככל הנראה השוואות רדודות, וייתכן שלא תעשה זאת מחדש למרות שהמדינה משתנה בבירור.

כפתרון דרך, אתה יכול לעשות זאת ב mapStateToProps:

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