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

Question

I have a react component with a few state values. One of these values is compareKey. I have a handleChange() function that is suppose to update this state if it finds a match. For someone reason I can't figure out, the state of compareKey is not updating.

The two console.logs should both print out 'Limits', but only the temp value is printing out 'Limits'. Any reason to why my state is not updating?

Input code:

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

HandleChange Code:

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

The console prints...

match found
Temp: Limits
Compare Key: 

I would expect Compare Key to print 'Limits' as well, but it's blank. Not sure why my state is not being updated....

Answer 1

setState() is asynchronous and does not update the state at the moment it is called. Instead it queues up a state change which happens later. setState() calls may be batched together for efficiency.

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

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

There is no way to force React to update the state immediately. Instead, you can give setState() a callback function which will happen immediately after the state has been updated.

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