React Native 键问题

Question

我正在用 React Native 构建一个 FlatList。列表中的每一行都是一个带有 Header 和内容部分的手风琴组件 (github here)。但是我在下面得到了独特的 "key" 道具错误：

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

我有一个数据源如下。一个数组，其每个 object 具有名称、数字和键字段。

[
    {
        "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 prop.

Header个手风琴渲染如下：

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

我已经为 headers 添加了一个独特的关键道具以防万一。

手风琴内容渲染为：

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

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

Answer 1

在你的代码中尝试

Flatlist 组件

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

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

参考React Native Flatlist Document

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

React Native 键问题

React Native key issue

react-native

react-native-flatlist