Question

我在React Native中构建FlatList。列表中的每一行都是带有标题和内容部分的Accordion组件（github here）。但是，我获得了独特的关键＆＃34;道具误差如下：

我已经阅读了很多关于关键属性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}
        />
    );
}

手风琴组件有关键支柱。

手风琴的标题呈现如下：

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

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

Answer 1

尝试使用代码

Flatlist Component

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

将数字从数字更改为字符串后，应取消警告。

参考React Native Flatlist Document

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

React Native键问题

1 个答案: