警告在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