在 React Native 中插入数据时如何自动刷新 FlatList？

Question

从 GraphQL 服务器添加数据时，我的 FlatList 没有更新。我已经尝试过刷新和onRefresh，但我不太确定我将如何实现它，希望有人可以帮助我。

<View>
    <Query query={GET_ALL_RECIPES}>
      {({loading, data, error}) => (
        loading
          ? <ActivityIndicator />
          : (
            <FlatList
              keyExtractor={(item) => item.id}
              extraData={this.state}
              data = {data ? data.allRecipes : []}
              renderItem = {({item})=>(
                <TouchableOpacity onPress={()=>{
                  this.props.navigation.navigate('Details', {details: item})
                }}>
                  <Text style={styles.textConst}>Title: {item.title} </Text>
                  <Text style={styles.textConst}>Description: {item.description} </Text>
                  <Seperator />
                </TouchableOpacity>
              )}
              />
            )
          )}
    </Query>
<View>

Answer 1

你必须改变：

extraData={data}

通过将 extraData={this.state} 传递给 FlatList，我们确保 FlatList 本身会在 state.selected 更改时重新渲染。如果不设置这个 prop，FlatList 将不知道它需要重新渲染任何项目，因为它也是一个 PureComponent，并且 prop 比较不会显示任何更改。 FlatList information here