为什么没有找到我的比赛状态更新？

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