javascript - componentWillReceiveProps 在 React 中渲染了两次

Question

我正在研究react 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 我不明白两件事为什么它调用了两次？我能控制吗？为什么第二次它的值变成未定义？

Answer 1

您正在使用 this.state =... 而不是 setstate。 Setstate 仅更改所提供属性的值，其中“this.state =”更改整个集合。您应该使用setState，因为这也涉及重新渲染。