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，我们确保当state.selected更改时FlatList本身将重新呈现。如果不设置此道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。 FlatList information here

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

1 个答案: