javascript - 警告 : Each child in an array or iterator should have a unique "key" prop. 检查 `Units` 的渲染方法

Question

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

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 开发工具状态下有所不同，但出于某种原因我仍然遇到该错误。我在 stackoverflow 上查看了其他类似的错误，但似乎都没有解决这个特定问题。

Answer 1

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

来自 React :

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys

因此更新后的解决方案是:

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