React应用报错TypeError: profile.map is not a function原因查询

• 核心错误原因：你调用的https://reqres.in/api/users接口返回的根数据是对象类型，结构如下：

{
"page": 1,
"per_page": 6,
"total": 12,
"total_pages": 2,
"data": [/* 目标用户数组存放在这个字段里 */],
"support": {...}
}
你直接把整个返回对象赋值给了初始为数组的profile状态，此时profile变成了对象类型，而对象本身没有map方法，所以抛出类型错误。

• 隐藏问题1：map的回调函数没有返回值，就算数组赋值正确，也无法正常渲染列表内容。
• 隐藏问题2：React中渲染图片需要用img标签，不是image标签，同时循环渲染的元素需要添加唯一key属性避免警告。

首先修改接口请求后的状态赋值逻辑，只取返回结果里的用户数组：

const getProfile = async () => {
  setLoading(true);
  const response = await fetch("https://reqres.in/api/users");
  const data = await response.json();
  // 取返回对象内的data数组赋值
  setProfile(data.data);
  setLoading(false);
};

再修改列表渲染部分的代码，补全返回值和标签修正：

profile.map(i => (
  <Fragment key={i.id}>
    <ul>
      <li>{i.id}</li>
      <li>{i.email}</li>
      <li>{i.first_name}</li>
      <li>{i.last_name}</li>
      <li>
        <img src={i.avatar} alt={`avatar of ${i.first_name}`} />
      </li>
    </ul>
  </Fragment>
))

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