React中无法访问特定结构对象值以渲染div的技术问题

看起来你是在React里尝试渲染多层结构的角色-用户数据，但卡在了用户信息的获取上。我先理清楚你的数据结构：外层是角色名（比如admin、marketer）作为键，每个角色对应一个数组，数组里的每个元素又是以用户ID为键的对象，里面包含name、address等用户信息对吧？

问题核心是你需要先把数组里的用户对象提取出来，才能访问到name这类字段。我给你写一个完整的可运行示例，你可以直接参考：

class RoleUserRenderer extends React.Component {
  // 模拟你的state数据结构
  state = {
    roles: {
      admin: [
        { 101: { name: "Kevin", address: "San Francisco" } },
        { 102: { name: "Emma", address: "Seattle" } }
      ],
      marketer: [
        { 201: { name: "Liam", address: "Boston" } }
      ]
    }
  };

  render() {
    return (
      <div style={{ padding: "20px" }}>
        {/* 遍历所有角色 */}
        {Object.keys(this.state.roles).map((roleName, roleIndex) => {
          // 获取当前角色对应的用户数组
          const userEntries = this.state.roles[roleName];
          
          return (
            <div key={roleIndex} style={{ marginBottom: "30px" }}>
              <h2 style={{ color: "#2c3e50" }}>{roleName}</h2>
              {/* 遍历当前角色下的所有用户条目 */}
              <div style={{ marginLeft: "15px" }}>
                {userEntries.map((userEntry, userIndex) => {
                  // 从用户条目中提取用户信息（每个条目是{userId: userInfo}结构）
                  const userInfo = Object.values(userEntry)[0];
                  
                  return (
                    <div key={userIndex} style={{ padding: "8px", borderBottom: "1px solid #eee" }}>
                      <p><strong>用户名:</strong> {userInfo.name}</p>
                      <p><strong>地址:</strong> {userInfo.address}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

关键步骤说明： #

• 用Object.keys(this.state.roles)拿到所有角色名称，逐个渲染角色标题。
• 每个角色对应的userEntries是数组，数组元素是{用户ID: 用户信息}的结构，所以用Object.values(userEntry)[0]提取用户信息——Object.values会返回对象所有值组成的数组，这里每个条目只有一个用户，取索引0的元素即可。
• 给每个循环元素加上key属性，这里用索引作为临时方案，如果你的数据里有唯一的角色ID或用户ID，建议替换成这些唯一值，能提升React渲染效率，避免更新异常。

如果你的用户数组结构有变化（比如一个数组元素包含多个用户），只需要把Object.values(userEntry)[0]改成Object.values(userEntry).map(...)来遍历所有用户就行。

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