React中如何遍历无名数组？调用map方法报错not a function怎么解决

出现 Uncaught TypeError: data.map is not a function 错误有两个核心原因：

• 初始状态类型不匹配：你给data设置的初始值是对象{ items : [] }，对象本身没有数组的map方法。首屏渲染时接口请求还未返回，会直接用初始值执行data.map，直接触发类型错误。
• 语法缺失：你的代码中EmployeeList函数体没有闭合，return语句结束后缺少函数结束的}，也会导致运行异常。

根据你给出的接口返回数组结构[{"id":19,"name":"asd","salary":123},{"id":20,"name":"wer","salary":1}]，推荐直接将data状态设定为数组类型，修正后的完整代码如下：

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

function EmployeeList() {
  // 初始值改为空数组，匹配接口返回的数组类型
  const [data, setData] = useState([]);

  const getEmployees = () => {
    fetch("http://127.0.0.1:8000/api/employee-list")
    .then((response) => response.json())
    .then((res) => {
        setData(res);
        console.log(res);
    })
  };

  useEffect(() => {
    getEmployees();
  }, [])

  return (
    <div>
        <ul>
            {/* 加可选链避免异常情况下调用map报错 */}
            {data?.map((employee) =>
                <li key={employee.id}>{employee.name}</li>
            )}
        </ul>
    </div>
  )
}
// 补全函数闭合括号
export default EmployeeList;

额外优化点：遍历列表时给li标签加唯一key属性，是React列表渲染的规范要求，可以避免控制台警告。

如果你的接口实际返回的是包含items字段的对象结构（比如{items: [员工数组]}），只需对应修改两处即可：

• 遍历语句改为data?.items?.map()
• 初始状态保持const [data, setData] = useState({ items : [] });即可

内容的提问来源于stack exchange，提问作者snorre søvold