Question

我已经在构造函数中定义了一个状态，就像这样

      this.state={
            datainaccordion:'',

        };

现在在我的componentWillReceiveProps中，每次收到新的Props时，我都更改了状态，就像这样，

componentWillReceiveProps(nextProps){
        console.log('something',nextProps);
        if (nextProps.data) {
        this.setState({ datainaccordion: nextProps.data });
       }
       console.log('this.state.datainaccordion ',this.state.datainaccordion);
    }

我可以看到该控制台，并且每次收到新数据时它都可以正常工作，但是当我在渲染器中记录控制台的相同状态时，我看不到该控制台。这可能是什么原因，为什么会发生呢？另一件事是，我在渲染器中放置了另一个console.log（'rendering'），甚至没有显示出来。每当我获得新数据时，如何使它呈现？我也在这里添加渲染部分。

render(){
         console.log('rendering');  // this is not being printed  
        console.log('rung',this.state.datainaccordion);
     // some logic to extract an array out of the data in this .state.datainaccordion and we call it arraytoloop



        return (
            <div>
                     <SomeComponentXYz

                       data={arraytoloop}

                       />
              </div>


       );    }

 }

Answer 1

如@satyajeet jha所说

此组件是从PureComponent扩展的。但是PureComponent已实现 shouldComponentUpdate 。

React.PureComponent的shouldComponentUpdate（）仅作比较   对象。   ...
  仅在您希望拥有时扩展PureComponent   简单的道具和状态

我想你的字段 datainaccordion 是对象。因此，PureComponent中的componentUpdate应该返回false并停止更新，因为它不会检查新对象与旧对象之间的差异

componentWillReceiveProps中更改的状态未显示在渲染器中

1 个答案: