React本机状态未更新

Question

我觉得我在这里快要疯了。。。。。我在搜索栏中键入"x"，但this.setState({ filter: text });没有更新状态。。。。console.log(this.state.filter);给了我一个值"(它在构造函数中设置的初始值)。我可以看到文本变量的值是x…但它只是没有更新过滤器状态。

constructor(props) {
super(props);
this.state = {
timer: 30 * 60,
lat: 0,
lng: 0,
loading: false,
data: [],
pagetoken: null,
refreshing: false,
waiting4answer: false,
placeName: null,
placeUri: null,
filter: '',
};

}

renderHeader = () => {
if (this.state.waiting4answer === false) return null;
return (
<SearchBar
placeholder="Type Here..."
lightTheme
round
onChangeText={(text) => {
this.setState({ filter: text });
console.log(this.state.filter);
this.searchFilterFunction();
}}
autoCorrect={false}
/>
);
};

Answer 1

状态正在更新，只是检查和使用更新状态的方式有缺陷。

状态为异步

状态是异步的，设置状态需要时间。您遇到的问题是，您正在调用setState，然后立即记录state中的值。不幸的是，当你这样做时，状态在你记录它的时候不会更新，所以你得到的是以前的值。

状态进行回调

如果要使用刚刚设置的state值，则需要使用setState所具有的callback函数。this.setState({key: value}, callback)

此回调允许您在设置状态后运行函数。您可以通过以下方式使用它：

this.setState({filter: text}, () => {
// put the things you wish to occur after you have set your state.
console.log(this.state.filter);

// I am guessing your searchFilterFunction requires the updated filter value in state 
// so put that here too
this.searchFilterFunction();
});

这意味着，一旦您在该状态中设置了filter的值，并且该状态已更新以反映该值，它将运行callback，因此它将记录当前处于状态的filter的值，然后运行searchFilterFunction。

进一步阅读

你可以在迈克尔陈的这一系列伟大文章中阅读更多关于国家的信息

https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0

https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6

Answer 2

在设置后立即使用setState回调获取更新的状态

this.setState({ filter: text }, () => {
console.log(this.state.filter);
});

react setState是异步