如何解决React调用API后出现的map is not a function报错

错误原因 #

• 你混淆了Axios返回值结构和接口返回的结构：Axios请求的返回值本身自带一层data字段，存储接口返回的完整JSON内容；而你的接口返回的JSON里又嵌套了一层data字段才是需要遍历的数组，直接赋值fetch.data给state的话，state拿到的是外层对象，不是数组，自然没有map方法。
• 你的异步请求代码没有放在useEffect钩子中，也没有用async函数包装await逻辑，会导致请求重复触发、语法报错。
• 初始state设为[]是正确的，不需要改成对象。

修正后完整代码 #

import { useState, useEffect } from 'react';
import Axios from 'axios';
import { Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';

function Facility() {
  const [facility, setFacility] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    // 包装异步请求函数
    const getFacilityData = async () => {
      try {
        // 变量名避免用fetch，防止和原生fetch API重名
        const res = await Axios.get('你的API地址');
        // 取两层data：第一层是Axios的返回封装，第二层是你接口返回的data数组
        setFacility(res.data.data);
        setLoading(false);
      } catch (err) {
        console.log(err);
        setError('数据加载失败');
        setLoading(false);
      }
    };

    getFacilityData();
  }, []); // 空依赖数组保证组件挂载时只请求一次

  if (loading) return <div>加载中...</div>;
  if (error) return <div>{error}</div>;

  return (      
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Facility Code</TableCell>
          <TableCell>Facility Name</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {/* 可选链?.避免state异常时调用map报错 */}
        {facility?.map((item, idx) => (
          <TableRow key={idx}>
            <TableCell>{item.facility_code}</TableCell>
            <TableCell>{item.facility_name}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

export default Facility;

重点说明 #

• 赋值时必须取res.data.data：第一层res.data对应你贴的{"data": [...]}完整JSON对象，第二层.data才是可以遍历的数组。
• 异步请求必须放在useEffect中，空依赖数组保证组件挂载后只发起一次请求，避免无限重渲染。
• 增加加载、错误状态判断可以提升用户体验，可选链?.可以在state类型异常时避免页面直接崩溃。

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