如何重新渲染平面列表？

Question

与ListView不同,我们可以更新this.state.datasource.是否有任何方法或示例来更新FlatList或重新呈现它？

我的目标是在用户按下按钮时更新文本值...

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

Answer 1

使用extraDataFlatList组件上的属性.

正如文件所述:

通过传递extraData={this.state}给FlatList我们确保FlatList自己将在state.selected更改时重新渲染.没有设置这个道具,FlatList就不会知道它需要重新渲染任何物品,因为它也是一个PureComponent,并且道具比较不会显示任何变化.

Answer 2

尝试:

1. 将额外数据设置为布尔值.

   而额外= {this.state.refresh}

2. 要重新渲染/刷新列表时,切换布尔状态的值

   this.setState({ 
       refresh: !this.state.refresh
   })
   

Answer 3

哦,这很容易,只需使用 extraData

您可以看到额外数据在幕后工作的方式是FlatList或VirtualisedList只是通过常规方法检查该对象是否已更改onComponentWillReceiveProps.

因此,您所要做的就是确保给出改变的东西extraData.

这是我做的:

我正在使用immutable.js所以我所做的就是传递一个包含我想要观看的内容的Map(不可变对象).

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

这样一来,当this.props.foo或this.props.bar变化,我们CustomComponentRow将更新,因为不可变对象将是一个不同的比以前.

Answer 4

好的，我刚刚发现，如果我们想让FlatList知道数据道具之外的数据变化，我们需要将其设置为extraData，所以我现在这样做：

<FlatList data={...} extraData={this.state} .../>

请参考：https : //facebook.github.io/react-native/docs/flatlist#extradata

Answer 5

经过大量搜索和寻找真正的答案后，我终于得到了我认为最好的答案：

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

我的主要问题是（KeyExtractor）我没有像这样使用它。不工作： keyExtractor={ (item) => item.ID} 在我更改为这个之后，它就像魅力一样工作，我希望这对某人有帮助。

Answer 6

只是这里之前答案的扩展。要确保两个部分，确保您添加了 extraData 并且您的 keyExtractor 是唯一的。如果您的 keyExtractor 是常量，则不会触发重新渲染。

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>