如何在React Native中更新状态并根据更新后的状态做出决策

Question

我在我的应用程序中使用了Picker组件。屏幕上有一个列表视图。根据Picker的选定值，列表视图会得到更新。以下是代码：

<Picker style={{ flex: 0.3, marginTop: -10 }}
  selectedValue={this.state.helpModel.needyType}
  onValueChange={(itemValue, itemIndex) => {
    this.setState((prevState) => {
      return { helpModel: { needyType: itemValue, helpStatus: prevState.helpModel.helpStatus } }
    });
    this.getNeedies(this.state.helpModel);
  }}>
  {this.state.helpCategory.map((data, index) => {
    return (
      <Picker.Item key={data.id} label={data.title} value={data.value} />
    );
  })}
</Picker>

我已经使用状态变量(this.state.helpModel.needyType)绑定了选择器的selectedValue并在onValueChange中更新状态变量。然后，根据this.state.helpModel调用一个方法，该方法将获取列表数据并更新列表视图。但是helpModel没有立即得到更新，因此它会保留之前的值一段时间，但在这段时间内，将调用getNeedies方法，并基于先前的值请求数据。

可能是因为setState具有异步行为，所以出现了这种情况。我使用setTimeout等待2-3秒后调用getNeedies方法来解决此问题。但是否有更好或更优雅的方法来执行相同的操作？或许像promises中的.then一样？

我刚开始学习React Native，请忽略如果这个问题太基础了。

- Sunil Garg

Answer 1

由于 setState 是以异步方式工作的。这意味着在调用 setState 后，this.state 不会立即更改。因此，如果您想在设置状态后立即执行操作，请使用第二个参数作为 setState 上的回调函数。考虑以下示例：

this.setState({
    data: newData
}, () => {
  //TODO: Do something with this.state here
});

- Pir Shukarullah Shah

Answer 2

使用 setState 方法改变状态并不会立即更新应用程序的 state。需要使用回调函数。

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

如果您想跟踪，这里是链接的详细信息。

- Sagaryal