為什么沒有找到我的比賽狀態更新？

Question

我有一個帶有一些狀態值的React組件。 這些值之一是compareKey。 我有一個handleChange（）函數，假設發現匹配項，該函數將更新此狀態。 由於某些原因，我無法弄清楚，compareKey的狀態未更新。

這兩個console.logs應該都打印出“ Limits”，但是只有temp值才打印出“ Limits”。 為什么我的狀態沒有更新？

輸入代碼：

<input type="text" name="keyToFind" placeholder="search here" value={this.state.keyToFind} onChange={this.handleChange.bind(this)} />
{renderOutFile}

HandleChange代碼：

handeChange(e) {
let target = e.target;
let value = target.type === 'checkbox' ? target.checked : target.value;
let name = target.name;
let keys = this.state.keyWordData;
let temp = '';

keys = keys.filter(obj => {
   return target.value === obj.name;
  }).map((obj,idx) => {
    console.log("match found");
    temp = obj.directs;
    this.setState({
      compareKey: temp
    });
   console.log("Temp: " + temp);
   console.log("Compare Key: " + this.state.compareKey);
  });

 this.setState({
   [name]: value
  });
}

控制台將打印...

match found
Temp: Limits
Compare Key: 

我希望Compare Key也會打印“ Limits”，但是它是空白的。 不知道為什么我的狀態沒有被更新...。

Answer 1

setState()是異步的，在被調用時不會更新狀態。 而是將狀態更改排隊，該狀態更改稍后發生。 可以將setState()調用批處理在一起以提高效率。

https://reactjs.org/docs/react-component.html#setstate

將setState（）視為請求而不是立即更新組件的命令。 為了獲得更好的感知性能，React可能會延遲它，然后在一次通過中更新幾個組件。 React不保證狀態更改會立即應用。

無法強制React立即更新狀態。 相反，您可以給setState()一個回調函數，該回調函數將在狀態更新后立即發生。

this.setState({
  compareKey: temp
}, () => {
  // This function will run after state.compareKey has been set to temp
});