反应列表渲染中的细节

Question

对于 render() 中的第一种方式：

const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>]
return (
<ul>{arr}</ul>
);

它运行时会出现我可以理解的警告：
警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。

但对于其他方式：

  return (
    <ul>
      <li>{numbers[0]}</li>
      <li>{numbers[0]}</li>
      <li>{numbers[1]}</li> 
    </ul>
  );

它运行正常，没有警告..

上面呈现列表的两种方式应该生成相同的虚拟 dom。但我不明白为什么第二种方式运行时没有像第一种方式那样发生警告。
有人可以告诉为什么吗？谢谢！

Answer 1

这是 React 对循环的要求。你可以在https://reactjs.org/docs/lists-and-keys.html找到更多信息