反应本机状态

Question

我是反应的初学者，但我已经在几个地方搜索过，我无法解决。我的问题是在 react native 中更改变量的值，基本上我需要创建一个函数来设置一个 true 或 false 的变量，但是当我尝试使用该变量时，它总是假的。

在构造函数中：

this.state = {
  uid: "",
  name: "",
  email: "",
  pass: "",
  loading: false
};

该函数是按钮的调用：

setLoader = () => {
  console.log(this.state.loading);
  this.setState({ loading: !this.state.loading });
  console.log(this.state.loading);
};

控制台的退出是：

[19:52:10] false
[19:52:10] false

Answer 1

这是因为设置状态是一项异步任务。它需要时间来设置。如果您尝试像以前那样调用该值，您会发现它尚未更新，这是预期行为。

如果您想在设置后找出状态中的值，则应执行以下操作

this.setState(previousState => { 
    return { loading: !previousState.loading }
}, () => console.log(this.state.loading));

setState 接受回调，一旦设置了状态，就会调用该回调

看看这三篇描述状态的精彩文章

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

是的，还有另一种方法可以做到这一点。您可以使用 componentDidUpdate 在一个部分中侦听状态更新，并可以发出所需的请求。

// The componentDidUpdate method will be called after each state update
componentDidUpdate(prevProps, prevState) {
    // Check if the count state has changed
    if (this.state.count !== prevState.count) {
      // Perform actions or fire events after state update here
      console.log('State has been updated. New count:', this.state.count);
    }
}

我写了一篇文章（下面的链接），解释了每个人都需要了解的有关类和功能组件的状态的所有这些方法，例如在状态更改时触发事件以及如何在状态中使用数组等。

https://codingeagles.com/react-native-states/