反应原生警告：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React native Warning: Each child in a list should have a unique "key" prop反应原生警告：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-12-01 15:10:03
【问题描述】：

我有 html 部分。

<CompanyFlatList
              data={companyList}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <CompanyCardComponent
                  companyName={item.name}
                  goToHomeScreen={() => GoToLoadingScreen(item.code)}
                  randomColor={generateRandomCornerColor()}
                />
              )}
            />

我收到警告消息。

Warning: Each child in a list should have a unique "key" prop.

这里面如何使用key props？

【问题讨论】：

我猜您忘记在 companyList 上的每个项目上使用密钥？你能展示一下它是怎么做的吗？
没有看到这些组件的代码，只能推测，但似乎将key={item.id} 属性添加到<CompanyCardComponent> 可能会解决这个问题。
no..我在使用 key={item.id} 后收到同样的警告。
所以也许它来自companyList，正如我之前所说的那样？我们能看到吗？您也许可以提供一个可重现的示例
这是 companyList:--- Array [ Object { "code": 465, "name": "מעיין", }, Object { "code": 485, "name": "מעיין ", }, Object { "code": 984, "name": "מפעל הספורט להדגמה", }, ]

标签： reactjs react-native react-hooks

【解决方案1】：

使用 item.code 作为您的密钥

不一定是id。 keyExtractor 中的item 将是数组companyList 的每个成员，因此在您的情况下item 是一个看起来像这样的对象{ "code": 465, "name": "מע", }

<CompanyFlatList
  data={companyList}
  keyExtractor={(item) => item.code} // <----- change this
  renderItem={({ item }) => (
    <CompanyCardComponent
      companyName={item.name}
      goToHomeScreen={() => GoToLoadingScreen(item.code)}
      randomColor={generateRandomCornerColor()}
    />
  )}
/>

【讨论】：

【解决方案2】：

你的companyList 中的每个项目都应该有一个key 属性，所以你应该做这样的事情（这只是一个例子，我不知道你是如何获得你的 companyList）：

companyList.forEach(companyItem => companyItem.key = companyItem.code)

这样，列表中的每个项目都作为唯一键（假设代码是唯一的）

【讨论】：

我正在从 API 获取 companyList。