Question

我有一个用例，我希望在迭代它时为数组的每个元素分配唯一的id。注意，此数组包含重复值。我想使用index作为react元素中的键，但是linter规则不允许我使用index作为键。我想过使用System tics？有没有办法让我得到系统滴答，以便在每次执行指令时，我得到一个新值？如果是，建议的精度是多少？

Answer 1

我建议既不使用索引也不使用系统标记，因为这两个选项都会使您远离密钥应该提供的功能。

在文档中它说：“键帮助React识别哪些项目已更改，添加或删除。应该为数组内部的元素指定键，以便为元素提供稳定的标识”

因此有多种选择：

您可以创建一个函数来生成唯一键/ ids /数字/字符串并使用
您可以使用现有的npm软件包，例如uuid，uniqid等
您还可以生成随机数，例如new Date（）。getTime（）;并在前缀中添加您正在迭代的项目以保证其唯一性
最后，您可以使用从数据库中获取的唯一ID（如果您得到它）（很难说没有看到您的数据）

但是：键应该是稳定的，可预测的和唯一的。不稳定的密钥（如Math.random（）生成的密钥）将导致许多组件实例和DOM节点被不必要地重新创建，这可能导致性能下降和子组件中的状态丢失。

您可以在此处阅读更多内容：https://reactjs.org/docs/reconciliation.html#keys

所以没有完美的答案。这取决于你的用例...

Answer 2

尽管@Archer的方法可能已经足够可行，但我提供的解决方案主要用于OP所描述的情况......

＆＃13;

var createId = (
  /*  [https://github.com/broofa/node-uuid] - Robert Kieffer  */
  (window.uuid && (typeof window.uuid.v4 === 'function') && window.uuid.v4)

  /*  [https://gist.github.com/jed/982883]  - Jed Schmidt     */
  || function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}
);


console.log('createId() : ', createId());
console.log('createId() : ', createId());
console.log('createId() : ', createId());

＆＃13;

.as-console-wrapper { max-height: 100%!important; top: 0; }

＆＃13;

为js中的每个数组元素创建一个唯一的id？

2 个答案: