我有这个警告:
警告:数组或迭代器中的每个子节点都应该在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
};
我该如何解决?谢谢!