错误：未捕获类型错误：.map 不是函数答案

【问题标题】：error: Uncaught TypeError: .map is not a function错误：未捕获类型错误：.map 不是函数
【发布时间】：2022-11-19 10:29:28
【问题描述】：

我在使用 .map 函数获取 api 时遇到问题

我总是遇到错误（Apasih.js:23 Uncaught TypeError: dataProduk.map 不是一个函数）。

有人可以帮我解决这个问题吗？

这是我的代码

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import List_products from './List_products';



const Apasih = () => {
  const [dataProduk, setDataProduk] = useState([]);



 useEffect(() => {
    Axios.get(')
      .then((result) => {
        console.log('data API', result.data);
        const responseAPI = result.data;

        setDataProduk(responseAPI.data);
      })
      .catch((err) => {
        console.log('error: ', err);
      });
  }, []);

  return (
    <div>
      {dataProduk.map((produk) => {
        return <List_products key={produk.id} />;
      })}
    </div>
  );
};

export default Apasih;

【问题讨论】：

在使用 .map 之前，您是否记录了 dataProduk 的值？该错误清楚地表明函数 .map 在 dataProduk 上不存在，因此它暗示它不是数组。
我很确定这是一个数组。我查看了控制台，它显示为我想要的数据数组列表。但它就是行不通，我不知道为什么 :(
在 return 语句之前记录 console.log(dataProduk);。您需要确定，而不仅仅是非常确定 ;)。

标签： reactjs api axios

【解决方案1】：

dataProduk 要么是一个对象，要么是未定义的，你正在分配 result.data.data 你确定这是正确的吗？

【讨论】：

【解决方案2】：

如果响应是一个数组，您首先需要验证，例如，请求代码是 200，这没问题，但数据应该为 null，否则响应将更改 useState 的类型。

【讨论】：

【解决方案3】：

您需要检查它是否不为空并且它也是一个数组，即

!(data && Array.isArray(data))? null : <SomeComponent />

在处理项目中的数组时，始终使用此逻辑来防止后续错误或崩溃。

【讨论】：