使用LodashFP时为React生成唯一密钥

Question

我正在尝试使用Lodash的map方法在React中呈现组件列表，但是由于返回键的方式，生成的键始终是相同的。有什么解决办法吗？

{map((item) => (<Item {...item} key={item.id} />), items}

Answer 1

您不应使用索引号作为键。 here是博客的原因吗？

我发现的最好方法是btoa(Math.random()).substring(0, 12) JS本身支持btoa。

   console.log(btoa(Math.random()).substring(0, 12))

key = {btoa（Math.random（））。substring（0，12）}

Answer 2

由于您已经在loadashFP上，因此只需使用带有前缀的_.uniqueId：

_.uniqueId('KEY_');  // KEY_1
_.uniqueId('KEY_');  // KEY_2 etc ...

在您的情况下：

{map((item) => (<Item {...item} key={_.uniqueId('KEY_')} />), items}