如何为反应组件创建唯一键答案

【问题标题】：How to create unique keys for react Components如何为反应组件创建唯一键
【发布时间】：2020-10-18 07:39:37
【问题描述】：

所以，我在这里有这个组件，如果我不提供唯一键，React 会错误地呈现它。我不能给这个： key={${name}${index}} 作为键，因为每个元素的名称都可以编辑，所以这将导致重新安装......那么，我如何使这些键唯一？仅仅给出索引是行不通的......

{stringArray.map((name, index) => (
        <Component
          key={`${index}_${name}}`}
          name={name}
          index={index}
          onChange={onNameChange}
          onDelete={onNameDelete}
        />
      ))}

【问题讨论】：

如果您可以控制stringArray，请为其添加一个 id 属性。您可以使用 uuid() 之类的库来生成唯一 ID。
名称可以编辑，但地图中到达项目的索引是唯一的，因此您可以使用它。您也可以只使用 key={${index}}

标签： javascript reactjs typescript react-native

【解决方案1】：

我建议你做的一件事是安装 uuid npm 包here

不确定您使用的是 commonjs 还是模块，因此请在安装 uuid npm 包后在文件顶部尝试这两个

// modules
import { v4 as uuidv4 } from 'uuid';

// commonjs
const { v4: uuidv4 } = require('uuid');

那么你应该可以这样做

// Notice key is now the value of uuidv4()
{stringArray.map((name, index) => (
        <Component
          key={uuidv4()}
          name={name}
          index={index}
          onChange={onNameChange}
          onDelete={onNameDelete}
        />
      ))}

UUID 是一个通用的唯一 ID。 Further reading

【讨论】：

这将导致每个组件在每次重新渲染时重新安装，因为您在每次渲染时生成不同的键
对，我们可能想在数据本身生成时设置uuid