时间戳

首页 > 解决方案 > 遇到两个具有相同键的孩子 - 索引不起作用

react-native - 遇到两个具有相同键的孩子 - 索引不起作用

问题描述

请帮忙？这里有什么问题？我添加索引但仍有警告

{options.map((value, index ) => (
      <SelectPicker.Item  key={index} label={value} value={value} />
 ))}

标签： react-native

解决方案

index用作键是不好的做法。您可以选择以下任何选项来避免indexes或Math.random()提供键来响应或响应本机组件。

选项1

在使用列表呈现 UI 元素之前，自己为列表的前端创建静态 ID。

创建一个新数组，如下所示：

const optionsWithIds = options.map((item, index) => { ...item, id: index });

然后，像这样使用它：

{optionsWithIds.map((item, index ) => (
      <SelectPicker.Item  key={item.id} label={item.value} value={item.value} />
 ))}

选项 2

如果你的价值观是独一无二的，那应该是这样。只需将值分配为键。键应始终为字符串类型。如果 value 不是 type string，则应使用 将其转换为 string .toString()，但还要添加检查以查看 value 是否存在，否则尝试将 null 或 undefined 转换为 string 类型时会收到错误，应用程序将崩溃.

{options.map((value, index ) => (
      <SelectPicker.Item  key={value} label={value} value={value} />
 ))}

选项 3

创建您自己的密钥生成器函数。

let key = 0 // Make sure this variable is declared globally.

const getKey = () => {
  key += 1
  return key.toString()
}

export default getKey

用法：

import getKey from './getKey

{options.map((value, index ) => (
      <SelectPicker.Item  key={getKey()} label={value} value={value} />
 ))}

选项 4 仅当由于某种原因无法使用上述选项时，才使用以下选项。

将此调用的npm 模块添加nanoid到您的项目中，并使用它而不是索引来生成唯一的随机密钥。但是，只有在您无法访问静态唯一键元素的情况下才使用 nanoid。如果您有例如：您从后端收到的 id，请始终尝试使用它。因为即使在重新渲染之后 id 也将保持静态（相同），这是首先使用键的全部意义。

用法：

import { nanoid } from 'nanoid'
// Your other code
<SelectPicker.Item  key={nanoid()} label={value} value={value} />

选项 5

您还可以使用调用的这个npm 模块uuid来实现与选项 3 相同的结果。

用法：

import { v4 as uuidv4 } from 'uuid';

{options.map((value, index ) => (
      <SelectPicker.Item  key={uuidv4()} label={value} value={value} />
 ))}

希望这可以帮助。

推荐阅读