Повторно изобразяване на реагиращия компонент, когато неговите реквизити се променят

Представете си, че имате проект 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 } }