Question

import shortid from "shortid";

export const NavArray = [
  {
    to: "/Women",
    text: "1",
    id: shortid.generate()
  },
  {
    to: "/Women",
    text: "2",
    id: shortid.generate()
  },
  {
    to: "/Women",
    text: "3",
    id: shortid.generate()
  },
  {
    to: "/Women",
    text: "4",
    id: shortid.generate()
  }
];

我可以使用上述方法来呈现动态数据吗？

NavArray.map(val => <div key={val.id}>{val.text}</div> )

或者我应该这样使用：NavArray without id key

NavArray.map(val => <div key={shortid.generate()}>{val.text}</div> )

对此有任何建议，真的很有帮助。

Answer 1

这取决于您要实现的目标。

我猜您的generate方法为您提供了某种随机值。使用您的CodeSandbox中提供的方法，此生成的ID对于每个元素都将保持不变。

但是，第二种方法每次调用都会生成一个不同的ID，并且可能会降低性能。另外，即使重新渲染组件的key，也应始终保持不变，在这种情况下情况并非如此，这会降低应用程序的速度。

Answer 2

查看地图功能Mozilla Docs : Map

的文档

第二个参数给出了数组迭代的索引，您可以轻松地将其作为键传递

NavArray.map((val, index) => <div key={index}>{val.text}</div> )

Answer 3

当在react上绘制长列表时，我们需要使用密钥告诉react，以便react将新创建的虚拟dom与先前的dom进行比较。如果密钥每次都更改，则React无法将新创建的虚拟dom与先前的Dom进行比较。因此，作为经验法则，在调用rerender时不应更改子项的键。

通过使用shortid.generate（）以这种方式设置唯一的反应键吗？

3 个答案: