如何在React组件中遍历数组内对象的属性？

嘿，我帮你梳理下代码里的问题，咱们一步步修复就能正常渲染啦：

首先，你的父组件有两个核心问题： #

1. users的定义错误：你用了数组的[]包裹，但实际是键值对结构的对象，应该用{}。
2. 对象不能直接用map遍历：map是数组专属的方法，对象没有这个方法，得先把对象转成可遍历的数组格式。

修正后的父组件代码 #

render() {
  // 修正：用{}定义键值对对象，替代数组[]
  const users = {
    'tom': { phone: '123', email: 'hotmail' },
    'rob': { phone: '321', email: 'yahoo' },
    'bob': { phone: '333', email: 'gmail' },
  };

  // 使用Object.entries把对象转成[name, userInfo]格式的数组，再进行遍历
  const list = Object.entries(users).map(([name, userInfo]) => (
    // 必须添加key属性，React列表渲染要求每个子项有唯一标识
    <User 
      key={name} 
      name={name} 
      phone={userInfo.phone} 
      email={userInfo.email} 
    />
  ));

  return <ul>{list}</ul>;
}

子组件补全示例 #

你的子组件代码没写完，这里给你补全一个能正常渲染用户信息的版本：

render() {
  const { name, phone, email } = this.props;
  return (
    <li>
      <strong>{name}</strong>
      <p>电话: {phone}</p>
      <p>邮箱: {email}</p>
    </li>
  );
}

关键知识点总结 #

• 分清对象和数组的区别：你的users是键值对对象，不是数组，不能直接调用map方法。
• 遍历对象的常用方式：
  • Object.entries(obj)：返回[键, 值]格式的数组，适合同时获取键名和对应值
  • Object.keys(obj)：返回所有键名的数组，再通过obj[key]获取对应值
• React列表渲染必须加key属性，建议用唯一的标识（这里用用户名name就很合适）
• 传递props时要正确访问对象属性：比如用userInfo.phone，而不是错误的users.phone

内容的提问来源于stack exchange，提问作者Ralph David Abernathy