React使用Axios请求接口时出现data.map is not a function报错如何解决

问题根因 #

• 你调用的接口返回的根数据是对象类型，不是数组：返回结构为{ page: 1, per_page: 6, total: 12, total_pages: 2, data: [用户数组], support: {...} }，你直接把整个根对象赋值给了初始为数组的data状态，后续调用map方法时就会报错，因为对象没有map方法。
• 其次你的useEffect没有传入空依赖数组，会导致组件每次渲染都重复发起接口请求，存在性能问题。
• 额外优化建议：渲染前先判断data是不是数组，避免极端场景下的报错。

修复后代码 #

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

function Api() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("https://reqres.in/api/users/")
      .then((response) => {
        console.log(response);
        // 取返回根对象里的data字段（用户数组）赋值
        setData(response.data.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []); // 加空依赖数组，只在组件挂载时请求一次

  return (
    <>
      <ul>
        {/* 先判断data是数组再调用map，避免报错 */}
        {Array.isArray(data) && data.map((e) => (
          <li key={e.id}>{e.email}</li>
        ))}
      </ul>
    </>
  );
}

export default Api;

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