setState 没有更新 React 中的设置值 [重复]

Posted 2023-02-21

【中文标题】setState 没有更新 React 中的设置值 [重复]

【英文标题】：setState didn't update the set value in React [duplicate]

【发布时间】：2020-10-15 22:02:31

【问题描述】：

这是我尝试更新状态值的代码。我无法弄清楚为什么我的状态没有更新。我在每一行代码中添加了所有相应的控制台值。

handleFilter=(event)=>
  
    console.log(this.state.answerStatus) // Before update 'all'
    let val= event.target.value === "answered";
    console.log(val); // true or false
    this.setState(answerStatus:val);
    console.log(this.state.answerStatus); // 'all'
  

【参考方案1】：

在 React 中 setState 是异步的，这意味着在您调用 setState 后不会立即修改状态值，这就是您从 console.log 获取旧值的原因。

Why is setState in reactjs Async instead of Sync?

React Docs

handleFilter = (event) => 
    console.log(this.state.answerStatus) // Before update 'all'

    let val= event.target.value === "answered";

    console.log(val); // true or false

    this.setState(answerStatus:val, () => 
       console.log(this.state.answerStatus);
    );
    
  

【参考方案2】：

状态更新为async。

要在 setState 之后查看更新的值，请使用第二个参数，该参数采用回调函数并在那里发出控制台日志。

handleFilter = (event) => 
  console.log(this.state.answerStatus); // Before update 'all'
  let val = event.target.value === "answered";
  console.log(val); // true or false
  this.setState( answerStatus: val , () =>
    console.log(this.state.answerStatus)
  );
;