React中如何将多JSON对象添加到表格并获取成员ID与内部数据

我需要在React中将多个JSON对象添加到表格中，现有如下格式的JSON数据：

{
  "name": "somename",
  "rank": "50",
  "members": {
      "10": {
         "name": "Doug",
         "Age": "21",
         "Location": "USA"
      },
      "11": {
         "name": "Bob",
         "Age": "20",
         "Location": "CA"
      }
  }
}

请问如何获取members中的每个ID及其内部数据？我尝试了如下代码但未达到预期效果：

Object.keys(users[0].members).map((member, value) => (
        <Tr key={users[0].members[member]}>
          <Td>
            <HStack spacing="3">
              <Checkbox />
              <Avatar name={users[0].members[member].name}

你的代码存在几个核心问题：

• key属性不能直接传入整个member对象，应该用唯一的ID（也就是Object.keys返回的键值，比如"10"、"11"）
• 没有正确获取ID：map的第一个参数就是members的键（ID），第二个参数是索引，你可以直接用第一个参数拿到ID
• JSX标签未闭合，<Avatar>、<HStack>、<Td>、<Tr>都缺少闭合标签，这会导致语法错误

下面是两种可行的解决方案：

方案1：使用Object.keys获取ID与对应数据 #

先把users[0].members提取为变量，避免重复调用，再通过Object.keys遍历键值：

const members = users[0].members;

return (
  <Table>
    <Thead>
      <Tr>
        <Th>选择</Th>
        <Th>ID</Th>
        <Th>姓名</Th>
        <Th>年龄</Th>
        <Th>地区</Th>
      </Tr>
    </Thead>
    <Tbody>
      {Object.keys(members).map((memberId) => {
        const memberData = members[memberId];
        return (
          <Tr key={memberId}>
            <Td>
              <HStack spacing="3">
                <Checkbox />
                <Avatar name={memberData.name} />
              </HStack>
            </Td>
            <Td>{memberId}</Td>
            <Td>{memberData.name}</Td>
            <Td>{memberData.Age}</Td>
            <Td>{memberData.Location}</Td>
          </Tr>
        );
      })}
    </Tbody>
  </Table>
);

方案2：使用Object.entries简化代码 #

Object.entries会直接返回[键, 值]格式的数组，无需单独通过键取值，代码更简洁：

const members = users[0].members;

return (
  <Table>
    <Thead>
      <Tr>
        <Th>选择</Th>
        <Th>ID</Th>
        <Th>姓名</Th>
        <Th>年龄</Th>
        <Th>地区</Th>
      </Tr>
    </Thead>
    <Tbody>
      {Object.entries(members).map(([memberId, memberData]) => (
        <Tr key={memberId}>
          <Td>
            <HStack spacing="3">
              <Checkbox />
              <Avatar name={memberData.name} />
            </HStack>
          </Td>
          <Td>{memberId}</Td>
          <Td>{memberData.name}</Td>
          <Td>{memberData.Age}</Td>
          <Td>{memberData.Location}</Td>
        </Tr>
      ))}
    </Tbody>
  </Table>
);

关键注意事项 #

• key必须是唯一值，这里用memberId（"10"、"11"）是最优选择，尽量避免用数组索引作为key，尤其是数据可能增删改的场景
• 确保所有JSX标签都正确闭合，语法错误会导致组件无法正常渲染
• 提取重复调用的变量（比如users[0].members），让代码更易读且避免不必要的性能损耗

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