reactjs - 如何更新状态以使搜索正常工作？

Question

如何更新状态以使搜索正常工作？

我尝试进行搜索，但得到以前的状态：

示例： 我写：谷歌控制台：googl

const onHandleSearchResult = e => {
    setSearchValue(e.target.value); 
};

<Search
    placeholder="input search text"
    onChange={onHandleSearchResult}
/>  

标签： reactjs

Answer 1

从您的示例来看，您似乎是console.log在设置值之后执行的state. 我相信您的代码如下所示：

setSearchValue = (searchedValue) => {
   this.setState({ searchedValue });
   console.log('searchedValue:', this.state.searchedValue);
}

但是，上面的代码不会像你提到的那样工作。原因是setState是异步的。如果要显示 的正确值state，请使用 中的回调函数setState。例如

setSearchValue = (searchedValue) => {
   this.setState({ searchedValue }, () => {
      console.log('searchedValue:', this.state.searchedValue);
   });
}

这样，console.log只有在设置值时才会发生state。