在 axios 中没有定义 React JS 地图数据答案

【问题标题】：React JS map data is not defined in axois在 axios 中没有定义 React JS 地图数据
【发布时间】：2021-08-26 01:46:44
【问题描述】：

基本上，我开始研究示例 axois API，在控制台中，数据正在完善，一旦在命令中编译完成，它不会抛出任何错误，但在浏览器中，它会显示 `TypeError: data.map is not a function

任何帮助将不胜感激！`

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);
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  });

  return (
    <>
      <ul>
        {data.map((e) => (
          <li key={e.id}>{e.email}</li>
        ))}
      </ul>
    </>
  );
}

export default Api;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

到目前为止已经完成

【问题讨论】：

您确定response.data 是一个数组而不是JSON？
明白了，谢谢阿米拉我解决了。

标签： javascript reactjs api axios

【解决方案1】：

我想你忘记了 useEffect 的第二个参数中的依赖数组。

useEffect(() => { axios .get("https://reqres.in/api/users/") .then((响应) => { 控制台日志（响应）；设置数据（响应。数据）； }) .catch((错误) => { 控制台日志（错误）； }); }, []);

【讨论】：