1
支える必要があります、DepartmentRowの(FilterableTableによって作成された)。警告:ユニークな「キー」小道具を持っている必要があり、配列やイテレータ内の各子:</p> <p>警告:配列やイテレータ内の各子供はユニークな「キーは」私はこの警告を抱えている
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
};
どのように私はそれを解決することができますか?ありがとうございました!