警告：遇到两个孩子使用相同的密钥，`0`

Question

我正在尝试映射一个数组，并在表格项中显示我想要的内容。它要求我提供唯一键，因此我选择了以下代码，因为我在另一个组件中使用了它。我很好奇为什么它在这里不起作用。

renderData() {
   const { aminos } = this.props.aminos;
    return aminos.map((micro, i) => {
       return (
        <Table>
          <tbody>
             <tr>
              <th scope="row">1</th>
              <th key={i}>{micro.name}</th>
             </tr>
             <tr>
                <td key={i}>{micro.serum.current}</td>
                <td key={i}>{micro.serum.prev}</td>
                <td key={i}>{micro.serum.ref}</td>
             </tr>
           </tbody>
         </Table>
       )
   }

Answer 1

键应该放在最外面的组件上。

return aminos.map((micro, i) => {
   return (
    <Table key={i}>
      <tbody>
         <tr>
          <th scope="row">1</th>
          <th >{micro.name}</th>
         </tr>
         <tr>
            <td>{micro.serum.current}</td>
            <td>{micro.serum.prev}</td>
            <td>{micro.serum.ref}</td>
         </tr>
       </tbody>
     </Table>
   )
}

虽然这张地图会显示多个表格，但也不确定这是您想要的效果。此外，使用索引作为键也不是一个好主意，您应该使用某种唯一 id，例如数据库中的主键。