react 列表渲染

Posted 2020-10-19 HelloHello233

https://reactjs.org/docs/lists-and-keys.html#keys

以下代码运行会报错：Warning: Each child in an array or iterator should have a unique ‘key‘ prop.

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>
  );

结论：通过数组来渲染一个列表，必须要为元素项设置一个列表内唯一的标识key，这一样才不会报错，