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

【问题标题】：Warning in ReactJs: Each child in an array or iterator should have a unique "key" propReactJs 中的警告：数组或迭代器中的每个子项都应具有唯一的“键”道具
【发布时间】：2018-01-18 10:03:23
【问题描述】：

我收到此警告：

警告：数组或迭代器中的每个子项都应在 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
};

我该如何解决？谢谢！

【问题讨论】：

标签： reactjs key warnings

【解决方案1】：

看起来可能只是一个错字？

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

r.departament -> r.department

【讨论】：