Как сделать рендеринг компонента, когда он меняет свой реквизит асинхронно?

Question

Я использую React и Redux в проекте, у меня есть два компонента: родительский и дочерний.

Родительский компонент передает некоторые реквизиты дочернему элементу, когда дочерний компонент получает те реквизиты, которые он вызывает, некоторые действия, которые изменяют некоторые реквизиты (асинхронные), которые родительский элемент передал своему дочернему элементу. Теперь мой redux-store показывает, что данные в нем успешно сохранены. Но мой дочерний компонент не рендерится сам.

Родительский компонент:

class Parent extends React.Component {
      getChilds(){
       let child = [];
       let i = 0;
       for (let keys in this.props.home.data) {
         child[i] = (
         <Child title={keys} data={this.props.home.data[keys]} key={keys} />
        );
         i++;
         if (i === 6) break;
       }

      return Rows;
      }
    render(){
     return (
       <div>
        <h1>I am gonna call my child </h1>
        {this.getChilds()}
       </div>)
      }
}

дочерний компонент:

    class Child extends React.Component {
     // Here I'm not sure which lifecycle method to use to i'm gonna use
    // componentDidMount
    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);
      }
     }
     getGrandSong(){
     let grandSons = [];
     if(this.props.data.items.length > 0){
       grandSons = this.props.data.items.map( item => <GrandSon item={item} 
                     />);
      }
     return grandSons;
     }
    render(){
      return (
       <div>
        <h1> I am the child component and I will call my own child </h1>
        {this.getGrandSon()}
       </div>
     )
   }

Реквизиты обновляются, когда я проверяю реквизиты в инструменте реагирования-dev.

Answer 1

Вам нужны данные для повторного рендеринга при каждом изменении реквизита, поэтому вы можете вызвать их в функции рендеринга и реализовать shouldComponentUpdate() для глубокого сравнения реквизитов и вызова render().

Итак, в данном случае:

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);
      }
     }
    shouldComponentUpdate(nextProps){
        if(this.props.data.items.length === nextProps.data.items.length){
            for(let i=0; i< nextProps.data.items ; i ++){
                if(nextProps.data.items[i] !== this.props.data.items[i]) return true;
            }
        }
        return true;
    }
    render(){
        const getGrandSong = () => {
            let grandSons = [];
            if(this.props.data.items.length > 0){
                grandSons = this.props.data.items.map( item => <GrandSon item={item} />);
            }
            return grandSons;
        }
      return (
       <div>
        <h1> I am the child component and I will call my own child </h1>
        {getGrandSon()}
       </div>
     )
   }