如何在React中结合fetch API使用map函数，解决data.map不是函数报错

报错原因 #

• 你调用的员工列表接口返回的响应体不是直接的员工数组，而是一个包含status、data、message字段的包装对象，你直接把整个对象赋值给了数组类型的状态data，此时data变成对象类型，不存在map方法，因此触发报错。
• 代码还有两个隐性问题：1. 渲染员工姓名时没有用花括号包裹变量，会直接渲染成字符串item.employee_name而非对应值；2. 没有做请求异常捕获，接口报错时会导致状态异常。

修复方案 #

1. 接口拿到结果后取其中的data字段赋值给状态，不要直接传整个返回对象
2. 渲染变量时添加JSX语法要求的花括号
3. 给遍历生成的元素加唯一key属性，符合React渲染规范
4. 新增请求异常捕获逻辑，避免页面直接崩溃

修复后完整代码如下：

import React, { useState, useEffect } from "react";

export default function App() {
 const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
      .then(response => response.json())
      .then(result => setData(result.data))
      .catch(err => {
        console.error("员工列表请求失败", err)
        setData([])
      })
  },[]);
  const information = data.map((item) => {
    return (<h1 key={item.id}> {item.employee_name} </h1>);
  })
  return (
    <div className="App">
      {/* 移除了外层多余的h1标签，避免h1嵌套的语义错误 */}
      {information}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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