react-native - 如何等待 flatlist 的所有组件执行一个函数？

Question

我想以一种非常优雅的方式解决这个问题，但我觉得目前的代码非常混乱。所以我有一个包含平面列表和按钮的父组件。Flatlist 包含具有复选框的子组件，按下按钮时，我想检查我的 Flatlist 中的哪些复选框被勾选。我解决这个问题的方法是将一个道具传递给子组件。这就是我的父母 FlatList 和状态的样子 -

constructor(props) {
    super(props);
    this.state = {
      getAllVendorDetails: 0, //This state is to trigger an event(by 
      incrementing) in the child checkboxes to send the ticked vendors to 
      this parent component.
    };
  }


<FlatList
    data={this.state.vendorsToPick}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item }) => <SelectVendors getAllVendorDetails= 
    {this.state.getAllVendorDetails} pushData={(item) => 
    this.addVendor(item)} vendorData={item}></SelectVendors>}
    horizontal={true}
    extraData={this.state.getAllVendorDetails}
    showsHorizontalScrollIndicator={false}
/>

按下按钮时，我会增加状态getAllVendorDetails，这会触发我的子组件中的重新渲染，并且在 componentDidUpdate 中，我将勾选了复选框的组件作为参数推送给父组件 - 这反过来又调用了一个函数将这些项目添加到数组的父组件。所有这一切都很好，按下按钮时我得到了所有勾选的复选框。（也许有更好的方法来做到这一点，idk）。

我只想在我的数组中收到所有带有勾选复选框的项目后才执行操作，我不知道如何实现，目前按下按钮后我有 500 毫秒的延迟，然后如果我检查我的数组，我有所有勾选的复选框项目。但可以肯定的是，必须有更好的方法来做到这一点。

标签： react-nativereact-native-flatlist