Question

我在一个项目中使用React和Redux，我有两个组件，父母和孩子。

父组件在子组件收到那些道具时会传递一些道具给子组件，它调用一些动作来更改父组件传递给子组件的某些道具（异步）。现在，我的redux-store显示数据已成功存储在其中。但是我的子组件不会重新渲染。

父项：

val x = null           // 'x' has type `Nothing?`
val l = listOf(null)   // 'l' has type `List<Nothing?>

子组件：

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

当我在react-dev工具中检查道具时，道具会更新。

Answer 1

每当prop更改时，您都需要重新渲染数据，因此您可以在render函数上调用它并实现shouldComponentUpdate()来深入比较props并调用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>
     )
   }

当组件更改其道具异步时如何重新渲染？

1 个答案: