Javascript 如何为组件创建唯一键

所以，我这里有一个组件，如果我不给它唯一的键，它就会错误地渲染。 我不能给这个：key={

${name}${index}

}作为键，因为每个元素的名称都可以编辑，所以这将导致重新装载。。。那么，我如何使这些钥匙独一无二呢？仅仅给出索引是行不通的

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

{stringArray.map（（名称、索引）=>(
))}

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

不确定您是否正在使用commonjs或模块，因此在安装uuid npm包后，请在文件顶部尝试这两种方法

//模块
从“uuid”导入{v4作为uuidv4}；

//commonjs
const{v4:uuidv4}=require（'uuid'）；

那么你应该可以这样做了

//注意键现在是uuidv4（）的值
{stringArray.map（（名称，索引）=>(
))}

---

UUID是一个通用的唯一id。

如果您可以控制

stringArray

则向其添加一个id属性。您可以使用类似于

uuid（）

的库来生成唯一的id。可以编辑名称，但索引对于地图中的reach项目是唯一的，所以您可以使用它。您也可以只使用key={

${index}

}这将导致每个组件在每次重新渲染时重新装载，因为您在每个渲染时生成不同的键。是的，我们可能希望在生成数据本身时设置UUID