当我 setState() 时，FlatList 项目不更新

Question

我正在构建多个 select 模态。当用户按下该项目时，该项目应标记为 'Checked'。

问题我 added/removed 来自 id 数组的 id。当我打开并检查模式时，它没有显示 'Check' 标志。但是当我关闭并再次打开模态时，它显示 'Check' 标志。

为了跟踪 selected 项目，我在模态组件的状态下定义了项目。

  state = {
    selectedSeasonIds: this.props.selectedSeasonIds,
   }

这是我用来在屏幕上显示模态的 react-native-modal

<Modal
      isVisible={isSelectorVisible}
      onBackdropPress = {() => this.props.hideSelector()}>
      <View style={styles.modalContainer}>
          <FlatList
              style={styles.root}
              data={this.props.items}
              ItemSeparatorComponent={this._renderSeparator}
              keyExtractor={this._keyExtractor}
              renderItem={this._renderItemForMultiple}/>
      </View>
</Modal>

这是每个项目的渲染函数

_renderItemForMultiple = ({item}) => {
    return (
      <TouchableOpacity
        style={styles.itemStyle}
        onPress={() => {this._handleMultipleItemPress(item.id)}}>
        <RkText>{item.value}</RkText>
        { this._renderCheck(item.id) }   <<< Here is the problem
      </TouchableOpacity>
    );
  }

当用户点击项目时，FlatList 的项目调用 _handleMultipleitemPress

  _handleMultipleItemPress = (id) => {
    let { selectionType } = this.props;
    let { selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.state;
    if(selectionType===2) {
      if(_.includes(this.state.selectedSeasonIds, id)) {
        let newSelectedSeasonIds = _.filter(this.state.selectedSeasonIds, (curObject) => {
            return curObject !== id;
        });
        this.setState({selectedSeasonIds : newSelectedSeasonIds});
      } else {
        let newSelectedSeasonIds = [...this.state.selectedSeasonIds, id];
        this.setState({selectedSeasonIds : newSelectedSeasonIds});
      }
    }
    // season Select Action
    this.props.seasonSelectAction(id);
  }

问题我们 added/removed 来自 id 数组的 id。当我打开并检查模式时，它没有显示 'Check' 标志。但是当我关闭并再次打开模态时，它显示 'Check' 标志。

即使我们 setState 在 renderCheck() 中，模态也不会呈现。为什么会这样？我该如何解决？

  _renderCheck = (id) => {
    let { selectionType, selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.props;
    if(selectionType===2) {
      if(_.includes(this.state.selectedSeasonIds, id)) {
        return (<RkText>Check </RkText>);
      }
    } 
    return (<RkText> </RkText>);
  }

任何其他建议也将不胜感激！感谢阅读本文 post。

UPDATE 我调试了代码，当我按下该项目时，它没有通过 _renderItemForMultiple。我认为这是因为我没有为 _renderItemForMultiple 定义参数。如何将项目传递给它的参数？有什么想法吗？

Answer 1

即使您的状态发生变化，您也不会将其传递给 <FlatList>，因此它的道具不会改变。它的 shouldComponentUpdate 方法 returns false 当 none 它的道具改变时。正如文档所述：

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

因此您需要将 extraData={this.state} 传递给 FlatList。

当我 setState() 时，FlatList 项目不更新

FlatList item doesn't update when I setState()

javascript

react-native

react-native-flatlist