Question

我有一个州

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

和flatlist

 <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没有变化;

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

Answer 1

FlatList是一个PureComponent，因此当它的所有道具都没有改变时不会重新渲染。根据FlatList文档，重新渲染可以通过将extraData={this.state}传递给{{1}来引起}。

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

FlatList

并更新状态索引，如

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

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

1 个答案: