ReactJs中的警告：数组或迭代器中的每个子代都应具有唯一的“键”属性

Question

我收到此警告：

警告：数组或迭代器中的每个子代都应在DepartmentRow（由FilterableTable创建）中具有唯一的“键”道具。

这是DepartmentRow出现在FilterableTable中的位置：

showListOfDepartmentsToBeFiltered = () => {
    const {
        users
    } = this.props;

    if ( users.length > 0 ) {
        let row = [];
        users.filter(function(user, index) {
            return users.map(item => item.department.trim()).indexOf(user.department.trim()) === index;
        }).forEach(r => {
            row.push(
                <DepartmentRow key={r.departament} data={r} handleChange={(e) => this.handleChange(e)}/>
            );
        });
        return (
            <div>
                <table className={styles.departmentTable}><tr><thead>Departments</thead></tr>{row}</table>
            </div>
        );
    }
    return false;
}

这是DepartmentRow组件：

class DepartmentRow extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <tbody>
            <tr>
                <td><div><input type="checkbox" name="ListOfDepartments" value={this.props.data.department} onChange={(e)=>this.props.handleChange(e)}/>
                    <label htmlFor="ListOfDepartments">{this.props.data.department}</label></div>
                </td>
            </tr>
            </tbody>
        );
    }
}
DepartmentRow.propTypes = {
    data: PropTypes.object,
    handleChange: PropTypes.func
};

我该如何解决？ 谢谢！

Answer 1

看起来可能只是拼写错误？

row.push(
  <DepartmentRow key={r.departament} data={r} handleChange={(e) => this.handleChange(e)}/>
);

r.departament -> r.department