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

【问题标题】：React Native Flatlist - Each child must have "key" propReact Native Flatlist - 每个孩子都必须有“关键”道具
【发布时间】：2017-08-01 12:27:28
【问题描述】：

我有几个简单的 FlatList，每个都显示部门和商店的自定义列表项。我得到每个孩子都应该有一个唯一的“关键”道具的错误，但我已经定义了一个 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 是唯一的

【问题讨论】：

设置看起来正确，我能想到的唯一可能引发该错误的是，如果不是该数组中的每个对象都有 item.id

标签： reactjs react-native react-native-flatlist

【解决方案1】：

我发现了问题。

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

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

【讨论】：

【解决方案2】：

试着用这个改变这一行

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

【讨论】：

谢谢，但这没有意义 :) 传递的对象称为 item，并且使用 typedItem 会因空指针而崩溃。它只是用于智能感知的渲染