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：

选择键的最佳方法是使用一个字符串，该字符串唯一地标识其同级项中的列表项。通常，您会使用数据中的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

Answer 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>
 ));

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

2 个答案: