react-native - react native 状态不更新

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 然后立即记录来自状态的值。不幸的是，当你这样做时，状态在你记录它时还没有更新，所以你得到的是以前的值。

状态接受回调

如果你想使用刚刚设置的状态值，那么你需要使用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 的值并且状态已更新以反射(reflect)该值，它将运行 callback，因此它将记录filter 的值现在处于状态，然后它将运行 searchFilterFunction。

进一步阅读

您可以在 Michael Chan 的这一系列精彩文章中阅读更多关于状态的信息

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