如何通过更改任何状态值来重新呈现平面列表？

Question

我有一个状态

constructor (props) {
    super (props);
    this.state = {
      index: '',
      };
  }

和平面列表

 <FlatList
          showsVerticalScrollIndicator={false}
          removeClippedSubviews={false}
          data={this.props.response}
          keyExtractor={(item, index) => index}
          renderItem={({item, index}) => this.renderFlatListItem (item, index)}
        />

我想使用按钮单击重新呈现平面列表。按钮按下我正在改变

this.setState({index: 'value'}); 

我发现通过设置索引值，ui 正在渲染但不在 renderFlatListItem 内渲染，因为 this.props.response 没有变化；

我正在寻找一种解决方案，如果任何其他状态发生变化，我想重新呈现平面列表视图。让我知道是否可以使用 react native？

Answer 1

FlatList 是一个 PureComponent，因此当它的 props 没有改变时不会重新渲染，根据FlatList文档，重新渲染可以通过传递extraData={this.state}到FlatList.

如果没有设置这个 prop，FlatList 不会知道它需要重新渲染任何项目，因为它也是一个 PureComponent，并且 prop 比较不会显示任何更改。同样设置相同的状态状态不会导致它重新渲染

 <FlatList 
      extraData={this.state.index}
      showsVerticalScrollIndicator={false}
      removeClippedSubviews={false}
      data={this.props.response}
      keyExtractor={(item, index) => index}
      renderItem={({item, index}) => this.renderFlatListItem (item, index)}
    />

并更新状态索引，如

this.setState(prevState => ({index: prevState.index + 1}));