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