componentWillReceiveProps在反应中呈现两次

Question

我正在研究反应js我有一个像这样编写的子组件

 constructor(props) {
    super(props);
    this.state = {
      volume: this.props.forcasted_volume,
     yearValue:Number(localStorage.getItem('year'))//it's 2017 value
      loading: false
    };
  }
 componentWillReceiveProps(nextProps) {
    console.log(
      'before if condition...',
      this.state.yearValue,
      Number(localStorage.getItem('plan_year'))
    );
    if (
      this.state.yearValue ==
      localStorage.getItem('plan_year')
    ) {
      console.log('inside if condition.....', nextProps);
      this.state = {

        volume: nextProps.forcasted_volume,

        loading: false
      };
    } else this.setState({ loading: false });
  }

现在我的问题是我第一次看到componentWillReceiveProps我的this.state.yearValue是2017年我的预期，但第二次显示undefined我不明白2为什么它叫两次？我能控制它吗？为什么第二次它的价值成为undefined？

Answer 1

您正在使用this.state =...而非setstate。 Setstate仅更改提供的属性的值，其中＆＃39; this.state =＆＃39;改变整个集合。您应该使用setState，因为这也需要重新渲染。

Answer 2

道具与当前班级无关。这是父类/订阅的reducer的属性。检查您是否第二次使用setState或其他方式重新渲染父级。

Answer 3

在if ...语句中，将this.state更新为 this.setState（{volume：nextProps.forcasted_volume，loading：false}），就像你在else语句中一样。