数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱

Question

使用react.js在下面的代码中收到警告消息（）。我检查了stackoverflow上的答案并尝试删除警告消息，但它没有帮助。 在静态页面中创建了具有类似功能的单独示例，它工作正常。但是，这段代码正在抛出警告信息。如何删除此警告消息？

<tbody>
      {list.map(function(value){
             return(<tr className="gradeA" role="row">
                        <td className="sorting_1">{ value.id }</td>
                        <td>{value.name}</td>                          
                        <td>{value.location}</td>
                     </tr>);                                        
            })
        }       
</tbody>

Answer 1

您只需要从map中为返回的组件添加唯一键。在地图功能中，接收将另一个参数定义为关键字，并且对于您返回的每个tr，只需添加key={key}作为道具。

<tbody>
      {list.map(function(value, key){
             return(<tr className="gradeA" role="row" key={key}>
                        <td className="sorting_1">{ value.id }</td>
                        <td>{value.name}</td>                          
                        <td>{value.location}</td>
                     </tr>);                                        
            })
        }       
</tbody>