Question

我有几个简单的FlatLists，每个都显示分部和商店的自定义列表项。我得到的错误是每个孩子都应该有一个独特的“关键”道具，但我已经定义了keyExtractor并试图将key道具添加到自定义列表行组件中。即。

<FlatList
  style={_styles.list}
  data={this.props.divisions}
  extraData={this.state.chosenDivisionId}
  keyExtractor={this._keyExtractor}
  renderItem={this._renderDivisionItem}/>}
/>

_keyExtractor = (item, index) => item.id

_renderDivisionItem = ({ item, index }) => {
    let typedItem: DivisionData = item;
    return (
      <ShopListItem
        text={typedItem.name}
        selected={this.state.chosenDivisionId === typedItem.id}
        itemId={typedItem.id}
        key={typedItem.id} /* Have tried with and without this */
        onPress={itemId => this._updateStateForDivisionChosen(itemId)}
      />
    );
  };

为什么我仍然得到警告，我做错了什么？ keyExtractor方法适用于我的其他FlatLists。当然，使用的ID是唯一的

Answer 1

我发现了这个问题。

应用程序正在使用redux进行状态管理，并且使用初始状态初始化有问题的列表。对于两个列表，模型已更改id的属性名称，从divisionId和shopId更改为普通id - 但我忘记在初始状态对象中更改此值。因此，当数据到达之前呈现的列表时，密钥提取器无法在项目上找到id道具，因为它们被称为divisionId或shopId。当数据到达时，状态将被覆盖，并且密钥将填充正常。

感谢您的回答，我希望这个错误可以帮助将来的某个人： - ）

Answer 2

尝试使用此

更改此行

_keyExtractor = (item, index) => typedItem.id

React Native Flatlist - 每个孩子必须拥有“关键”道具

2 个答案: