首页 文章

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

提问于
浏览 次
1

我有几个简单的FlatLists，每个都显示分部和商店的自定义列表项 . 我得到的错误是每个孩子应该有一个独特的"key"道具，但我已经定义了 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是唯一的

reactjs react-native react-native-flatlist

2 回答

  • 2

    我发现了这个问题 .

    该应用程序使用redux进行状态管理，并使用初始状态初始化相关列表 . 模型已经更改了id的属性名称，从 divisionId 和 shopId 更改为普通 id 两个列表 - 但是我忘了在初始状态对象中更改它 . 因此，当数据到达之前呈现的列表时，键提取器无法在该项上找到 id prop，因为它们被称为 divisionId 或 shopId . 当数据到达时，状态将被覆盖，并且密钥将填充得很好 .

    谢谢你的回答，我希望这个错误可以在将来帮助某人:-)

    回复于
  • 1

    尝试用此更改此行

    _keyExtractor = (item, index) => typedItem.id
    回复于

相关问题