javascript - 在react中setState后状态值没有被修改

Question

我知道 setState 是一个异步操作，因此我进行了同步调用，以确保在我的 componentWillReceiveProps 触发之前更新状态值，但它仍然显示以前的值。这段代码已经写在我的子元素中。我怀疑我的父元素中有什么要做的吗？或者还有其他原因吗？下面是我的代码

constructor(props) {
    super(props);
    this.state = {

      loading: false,
      yearValue:Number(localStorage.getItem('year'))//this is 2019

    };
  }
  componentDidMount() {

  }
  componentWillReceiveProps(nextProps) {
    console.log(
      'before if condition...',
      nextProps,
      Number(localStorage.getItem('year'))
    );
    if (
      this.state.yearValue ===
      Number(localStorage.getItem('year')) //this condition satisfied twice before it changed the value
    ) {
      console.log('inside if condition.....', nextProps);
      this.setSstate = {

        loading: false
      };
    } else this.setState({ loading: false });
  }
  updatePrograValues = year => {//year = 2017
    if (year === Number(localStorage.getItem('year'))) {
      this.props.showPlanYearValues(year);
    } else {


      this.setState({

        loading: true
      },this.props.tooltipRefresher());
    }
  };

Answer 1

如果我假设您的 setState 调用中错误的 ; 是问题中的拼写错误，并且不在实际代码中，那么问题就在这里:

this.setState({
  loading: true
},this.props.tooltipRefresher());

调用 this.props.tooltipRefresher()，然后将其返回值传递给 setState，与 foo( bar()) 调用 bar 并将其返回值传递给 foo。

如果您打算在状态值更新后调用它，请从中删除()，这样您就不会调用它，而是传递将其放入 setState 中，因此 setState 将在设置状态时调用它:

this.setState({
  loading: true
},this.props.tooltipRefresher);
// No () --------------------^

如果它对 this 的值敏感(例如，tooltipRefresher 期望 this 为 this.props)，您可能需要bind:

this.setState({
  loading: true
},this.props.tooltipRefresher.bind(this.props));

...或箭头函数:

this.setState({
  loading: true
},() => this.props.tooltipRefresher());