Question

我有一个带有一些状态值的react组件。其中一个值是compareKey。我有一个handleChange（）函数，假设在找到匹配项时更新此状态。由于某些原因我无法弄清楚，compareKey的状态没有更新。

两个console.logs都应打印出＆＃39; Limits＆＃39;但只有临时值打印出来＆＃39;限制＆＃39;。为什么我的州没有更新？

输入代码：

<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:

我希望比较密钥可以打印＆＃39;限制＆＃39;同样，但它是空白的。不知道为什么我的州没有更新....

Answer 1

setState()是异步的，并且在调用时不会更新状态。相反，它会排队稍后发生的状态变化。为了提高效率，可以将setState()个电话分组在一起。

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

将setState（）视为请求而不是立即命令更新组件。为了获得更好的感知性能，React可能会延迟它，然后一次更新几个组件。应对并不保证立即应用状态变化。

无法强制React立即更新状态。相反，您可以为setState()提供一个回调函数，该函数将在状态更新后立即发生。

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

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

1 个答案: