React中如何根据选中id过滤对象数组获取对应用户信息？

问题根因 #

• Object.keys(users)返回的是目标集合的键组成的字符串数组，如果你的users是数组，返回的就是["0", "1"]这类索引字符串，filter回调中拿到的参数是字符串类型的键，不存在.id属性，判断user.id === id永远为假，过滤结果为空，自然不会渲染任何内容。
• 你给出的users数组语法不规范，数组不能用0: {}这种键值对写法，这是普通对象的语法，需要先确认users是数组类型还是对象类型。
• 你通过useState定义的id是字符串类型，匹配时要注意和对比值的类型保持一致。

修复方案 #

方案1：将users改为标准数组（官方推荐写法） #

首先修正users的定义，给每一项显式加id字段：

const users = [
  {
    id: 0,
    name: "John",
    email: "jsmith@gmail.com"
  },
  {
    id: 1,
    name: "Bob",
    email: "bsmith@gmail.com"
  }
]

之后直接对数组做过滤遍历即可，不需要调用Object.keys：

// 可以把id的初始值改为数字类型，减少类型转换
const [id, setId] = useState(1);

{users.filter(user => user.id === id).map(user => (
  <div className="profile" key={user.id}>
    <h1>{user.name}</h1>
    <h1>{user.email}</h1>
  </div>
))}

方案2：保持users为键值对对象的写法 #

如果不想修改现有users的结构，先把users修正为合法的对象类型：

const users = {
  0: {
    name: "John",
    email: "jsmith@gmail.com"
  },
  1: {
    name: "Bob",
    email: "bsmith@gmail.com"
  }
}

修改过滤逻辑，直接匹配键和id的值：

{Object.keys(users).filter(userId => userId === id).map(userId => {
  const userDetails = users[userId]
  return (
    <div className="profile" key={userId}>
      <h1>{userDetails.name}</h1>
      <h1>{userDetails.email}</h1>
    </div>
  )
})}

内容的提问来源于stack exchange，提问作者stronghold051