Javascript 如何为数组中相同的字符串值生成永久的React键？

我有一个文本框，用户在其中输入文本。然后执行特定关键字的搜索，并在这些关键字处拆分字符串

第一个输入可能看起来像

[
    0: "this is "
    1: "word"
    2: " a form field value with another "
    3: "word"
]

然后可能会进行更改以删除第一个重复的单词：

[
    0: "this is "
    1: " a form field value with another "
    2: "word"
]

如何为每个数组项创建持久密钥？我需要第二个

word

值具有与第一次生成时相同的React键，而不考虑数组位置。无论值是否相同，它都是一个单独的组件实例。我现在有一个问题，删除一个拆分的单词会同时删除这两个单词，因为删除第一个单词后，键会发生变化

---

最佳实践建议不要使用数组索引，但我不确定在这种情况下如何生成唯一键。

您可以将值用作键，并将索引保留为值

[
    "this is ": [0]
    "word": [1,3]
    " a form field value with another ":[2]
]

然后当你删除一个索引时，它会像

[
    "this is ": [0]
    "word": [3]
    " a form field value with another ":[2]
]

---

您可以使用reduce从拆分的字符串生成这种格式

let str=[“this is”，“word”，“一个表单字段值加另一个”，“word”]
让mapperbj=str.reduce（（op，inp，index）=>{
op[inp]=op[inp]| |[]
op[inp].推送（索引）
返回操作
}, {})
console.log（mapperbj）

据我所知，您可以使用任何东西作为键，但您希望它们对于每个项目都是唯一的

---

我建议您使用

btoa（JSON.stringify（object））

或通过向值添加索引来创建上面提到的唯一键，

${index}${value}

这是一个粗略的解决方案，但您可以将其视为字典程序

class组件{
构造函数（）{
此.state={
words:[“这是”、“单词”、“一个表单字段值与另一个”、“单词”]
};
this.wordMap=this.state.words.reduce（（m，x，index）=>{
m[指数]=x；
返回m；
}, {});
}
cleanWord（）{
让unique=newset（）；
for（输入此.wordMap）{
if（unique.has（this.wordMap[key]））{
this.wordMap[key]=null；//重复
}否则{
添加（this.wordMap[key]）；
}
}
}
onDelete（索引）{
this.wordMap[index]=null；
}
}
const dict=new SomeComponent（）；
格言cleanWord（）；
console.log（dict.wordMap）；
删除（1）条；
console.log（dict.wordMap）
作为控制台行{color:blue！important}
如果可以将删除的值标记为
null
，则可以使用索引作为键。此值无需额外筛选即可呈现。
在您的情况下，您似乎可以仅使用索引，或将索引与单词内容组合，如
${Index}${value}
将值用作键。谢谢@xdeepakv，但键必须是唯一的。同样的单词会有同样的答案。请检查我的答案！在React中，键必须是唯一的。同样的单词会有相同的键。然后，从数组中删除a值会更改索引，因此这意味着该键不会持久化。@RobFyffe如果是，objectI中永远不会有重复的属性名，最终会得到这样的解决方案。