React Native 关键问题答案

【问题标题】：React Native key issueReact Native 关键问题
【发布时间】：2017-08-10 08:57:53
【问题描述】：

我正在用 React Native 构建一个 FlatList。列表中的每一行都是带有 Header 和 Content 部分的 Accordion 组件 (github here)。但是，我在下面遇到了唯一的“关键”道具错误：

我已经阅读了很多关于关键属性here 和here 的内容，并尝试在我的组件上实现关键属性。我列表中的相关代码部分是：

我有一个数据源如下。一个数组，其每个对象都有名称、编号和键字段。

[
    {
        "name": "Credit Card",
        "number": "123456",
        "key": 0
    },
    {
        "name": "Bank Account",
        "number": "222222",
        "key": 1
    },
    ...
]

FlatList 组件：

<FlatList
  data={filteredList}
  keyExtractor={item => item.key}
  renderItem={({item}) => _renderAccordion(item)}
/>

我已按照文档中的建议添加了 keyExtractor。

平面列表中的每一行都使用 Accordion 组件呈现：

var _renderAccordion = function(item) {
    return(
        <Accordion 
            sections={[item]}
            key={"accordion"+item.key}
            renderHeader={_renderHeader}
            renderContent={_renderContent}
            underlayColor={colors.white}
        />
    );
}

手风琴组件有 key 属性。

手风琴的标题呈现如下：

var _renderHeader = function(item) {
    return (
        <View key={"header"+item.key}>
            <Text>{item.name}</Text>
        </View>
    );
}

我在标题中添加了一个唯一的 key 属性以防万一。

手风琴的内容呈现为：

var _renderContent = function(item) {
    return (
        <View key={"content"+section.key}>
            <Text>{item.number}</Text>
        </View>
    );
}

我在组件中使用的每个键都是唯一的，我想我已经为所有必需的部分添加了键。但我仍然收到错误消息。我会错过什么？提前致谢。

【问题讨论】：

如果您删除sections={ [item] }，警告会消失吗？

标签： react-native react-native-flatlist

【解决方案1】：

试试你的代码

平面列表组件

<FlatList
  data={filteredList}
  keyExtractor={item => ''+item.key}
  renderItem={({item}) => _renderAccordion(item)}
/>

将键从数字更改为字符串后，应解除警告。

参考React Native Flatlist Document

keyExtractor: (item: ItemT, index: number) => string

【讨论】：

警告已消失。谢谢你:)
你也可以{item => String(item.key)} - 更明确一点。