reactjs - 如何通过更改任何状态值重新渲染平面列表？

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)}
        />

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

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

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

我正在寻找一个解决方案，如果任何其他状态发生变化，我想重新渲染平面 ListView 。让我知道是否可以使用 React Native？

Answer 1

FlatList 是一个 PureComponent，因此当它的任何属性都没有改变时不会重新渲染，根据 FlatList 文档，重新渲染可能是由于传递 extraData={this .state 到 FlatList。

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

 <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}));