Question

在我的react组件中，我试图通过遍历用户集合来显示选择下拉列表：

{users.map(user => (
                <option value={user.id}>user.username</option>
              ))}

我遇到的问题是我的用户集合实际上是用userId键入的，然后值是实际的用户类。

如何遍历此类对象？

users: {
  1: {
    account_id: 1,
    email: "john@example.com",
    id: 1,
    inserted_at: "2018-12-20T17:25:56",
    registration_status: 1,
    updated_at: "2018-12-20T17:25:56",
    username: "john"
  }
}

Answer 1

您可以使用Object.values( users )

来映射用户

{ 
   Object.values( users ).map( user => (
    <option key={user.id} value={user.id}>user.username</option>
  )) 
}

这将映射所有内部值，而您不必使用索引器。

作为示例，您可以看到此代码段

const users = {
  1: {
    account_id: 1,
    email: "john@example.com",
    id: 1,
    inserted_at: "2018-12-20T17:25:56",
    registration_status: 1,
    updated_at: "2018-12-20T17:25:56",
    username: "john"
  }
};

Object.values( users ).map( user => console.log( user ) );

正如爱奥努特·阿希姆（Ionut Achim）所正确提及的那样，当您返回一系列项目时，请确保它们具有unique key property，以避免在代码行为中产生副作用；）

Answer 2

您似乎想Object.values：

const users = {
  1: {
    account_id: 1,
    email: "john@example.com",
    id: 1,
    inserted_at: "2018-12-20T17:25:56",
    registration_status: 1,
    updated_at: "2018-12-20T17:25:56",
    username: "john"
  }
}

console.log(Object.values(users))

即

{Object.values(users).map(user => (
  <option value={user.id}>user.username</option>
))}

循环访问键为ID且值为用户类的集合

2 个答案: