react-native - React Native 关键问题

Question

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

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

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

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

平面列表组件：

<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>
    );
}

我已经在标题中添加了一个唯一的关键道具，以防万一。

手风琴的内容呈现为：

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

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

score 1 · Accepted Answer

试试你的代码

平面列表组件

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

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

参考React Native Flatlist 文档

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

react-native - React Native 关键问题

1 回答 1

Related

Reference