警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查`Units`的渲染方法

Posted 2023-02-22

【中文标题】警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查`Units`的渲染方法

【英文标题】：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Units`

【发布时间】：2018-12-17 16:51:55

【问题描述】：

这只是我在这里的第二个问题，如果它在错误的地方或有错误的标签或任何东西，非常抱歉。

import React from 'react';
import  connect  from 'react-redux';
import  getUnits  from '../reducers/units';
import  Menu, Container, Grid, Header, Form  from 'semantic-ui-react';

class Units extends React.Component 

  componentDidUpdate(prevProps) 
    const  dispatch, course  = this.props
    if (prevProps.course.id !== course.id)
      dispatch(getUnits(course.id))
  

  units = () => 
    return this.props.units.map( unit => 
      <ul>
        <li key=unit.id> unit.name</li>
        <button>Edit Module Name</button> 
        <button>Delete Module</button> 
      </ul> 
    )
  

  render() 
    return (
      <Container>
        <Header as="h3" textAlign="center">Modules</Header>
         this.units() 
      </Container>
    )
  

const mapStateToProps = (state) => 
  return  units: state.units, course: state.course 


export default connect(mapStateToProps)(Units);

即使我在 li 元素中有键并且它们是唯一的，我在这个问题的标题中也遇到了错误。我可以看到它们在 redux 开发工具状态下有所不同，但由于某种原因，我仍然收到该错误。我在 *** 上查看了其他类似的错误，但这些错误似乎都没有解决这个特定问题。

【问题讨论】：

React unique "key" error的可能重复

【参考方案1】：

@NorianNyx的答案很好，基本上你需要给每个组件添加一个唯一的key。但是，添加索引不是一个好习惯，因为这不会每次都代表该项目。如果您在列表中删除或添加新项目，则索引将更改。

来自React：

选择键的最佳方法是使用一个字符串，该字符串在其兄弟项中唯一标识一个列表项。大多数情况下，您会使用数据中的 ID 作为键

所以更新后的解决方案是：

return this.props.units.map((unit) => (
<ul key=unit.id>
    <li> unit.name</li>
    <button>Edit Module Name</button> 
    <button>Delete Module</button> 
</ul>

));

通过这种方式，您的商品将始终拥有唯一的 id

【参考方案2】：

您的 <ul> 组件需要一个 key 属性。

只需将其更改为：

 return this.props.units.map((unit, i) => (
    <ul key=i>
        <li> unit.name</li>
        <button>Edit Module Name</button> 
        <button>Delete Module</button> 
    </ul>
 ));

【讨论】：

因为，正如@Tholle 所提到的，数组的所有***组件都需要一个用于 React 内部内容的键。更多信息可以找到：reactjs.org/docs/lists-and-keys.html

你可能还会从 React 收到警告，反对使用迭代器作为键。在这种情况下，只需将其作为字符串添加，例如 'module-' + i 或类似的。