React中状态数组为何需用people.people.map？如何修正该问题

为什么必须用people.people.map(...)？ #

你在List组件里把参数写成了(people)，但React组件的第一个参数是完整的props对象——也就是父组件传递过来的所有属性的集合。你从App组件传给List的是people={people}，这个数组会作为people属性存到props对象里。所以此时你定义的people变量其实是整个props对象，要拿到里面的数组，就必须用people.people来访问。

修复方法 #

有两种简单的方式解决这个问题：

方法一：解构props参数 #

直接在组件参数里解构出people属性，这样变量people就直接是父组件传递的数组：

const List = ({ people }) => {
  return (
    <div>
      {people.map((p) => (
        <div key={p.email}> {/* 添加唯一key，避免React警告 */}
          <span>{p.name}</span>
          <span>{p.email}</span>
        </div>
      ))}
    </div>
  );
};

方法二：手动从props中提取属性 #

如果不想用解构，也可以先把数组从props对象里取出来再使用：

const List = (props) => {
  const people = props.people;
  return (
    <div>
      {people.map((p) => (
        <div key={p.email}>
          <span>{p.name}</span>
          <span>{p.email}</span>
        </div>
      ))}
    </div>
  );
};

额外提示：React列表渲染时必须给每个子元素添加唯一的key属性，上面的代码里用p.email作为key（假设邮箱是唯一的），如果你的场景中邮箱不唯一，可以换用其他唯一标识，比如给每个person添加id字段。

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