Javascript 在react中设置状态后不修改状态值_Javascript_Reactjs

Javascript 在react中设置状态后不修改状态值

javascript reactjs

Javascript 在react中设置状态后不修改状态值,javascript,reactjs,Javascript,Reactjs,我知道setState是一个异步操作，所以我进行了一个同步调用，以确保在我的组件将接收props触发器之前更新状态值，但它仍然显示以前的值。此代码已在my child元素中编写。我怀疑在我的父元素中有什么事情要做吗？或者有其他原因吗？下面是我的代码 constructor(props) { super(props); this.state = { loading: false, yearValue:Number(localStorage.getItem(

我知道setState是一个异步操作，所以我进行了一个同步调用，以确保在我的

组件将接收props

触发器之前更新状态值，但它仍然显示以前的值。此代码已在my child元素中编写。我怀疑在我的父元素中有什么事情要做吗？或者有其他原因吗？下面是我的代码

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

如果我承担了错误的

setState

调用中，code>是问题的输入错误，而不是实际代码中的输入错误，问题在于：
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.setState({
  loading: true
},this.props.tooltipRefresher.bind(this.props));

…或箭头函数：

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