ReactJs中的警告:数组或迭代器中的每个子节点都应该具有唯一的“键”支柱

时间:2017-08-10 08:54:40

标签: reactjs key warnings

我有这个警告:

警告:数组或迭代器中的每个子节点都应该在DepartmentRow(由FilterableTable创建)中具有唯一的“key”prop。

这是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
};

我该如何解决?谢谢!

0 个答案:

没有答案