首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >警告:遇到两个具有相同密钥的子项,`0`

警告:遇到两个具有相同密钥的子项,`0`
EN

Stack Overflow用户
提问于 2018-06-04 05:10:18
回答 1查看 1.3K关注 0票数 0

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

代码语言:javascript
复制
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>
       )
   }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-04 05:15:32

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

代码语言:javascript
复制
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,比如数据库中的主键。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50671000

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档