Question

我有两个反应组件，一个名为 UserManagement 的外部组件和另一个名为 UserList 的组件，它一次用作子组件。我在Chrome控制台中收到了这条熟悉的错误消息：

Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserList`.

这是我UserList的渲染方法：

render() {
  const { users, filteredUsers, filter } = this.props.userStore;
  return (
    <div>
      { filteredUsers.map(user=><div key={user.id}>{user.username}</div>) }
    </div>
  );
}

正如您所看到的，这里没有异国情调，列表确实按预期工作，但仍然存在上述错误消息。我也尝试将箭头功能改回“oldschool”功能，顺便说一句。

这是我的外部组件UserManagement的render方法，我使用UserList，如上所示：

render() {
  const { users, filteredUsers, filter } = this.props.userStore;
  return (
    <div>
      <h4>User Management:</h4>
      <UserList userStore={this.props.userStore} />
    </div>
  );
}

我在哪里需要添加键属性？

0 个答案: