使用.map函数处理API数据时遇Uncaught TypeError错误求助

这个错误的核心原因是dataProduk不是数组，无法调用map方法。结合你的代码，从以下几个方面排查修复：

1. 确认API返回的数据结构 #

先查看控制台打印的data API内容：

• 如果result.data本身就是数组，直接把setDataProduk(responseAPI.data)改成setDataProduk(result.data)即可。
• 如果API返回嵌套结构（比如{ data: [...] }），要确保responseAPI.data确实是数组，而非undefined或对象。如果控制台里responseAPI.data不存在，dataProduk会被设为undefined，自然无法调用map。

2. 修复API请求地址 #

你的代码里Axios.get('')的URL是空的，这会导致请求失败，必须填入真实有效的API接口地址。

3. 增加数组类型校验 #

为避免非数组数据引发报错，渲染时先判断dataProduk是否为数组，同时记得给List_products组件传递产品数据：

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

完整修复示例 #

假设API返回结构为{ data: [...] }，修复后的代码如下：

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

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

  useEffect(() => {
    // 替换为真实API地址
    Axios.get('https://your-api-url.com/products')
      .then((result) => {
        console.log('data API', result.data);
        // 确保拿到的是数组，兜底空数组避免报错
        const productList = result.data.data || [];
        setDataProduk(productList);
      })
      .catch((err) => {
        console.log('error: ', err);
      });
  }, []);

  return (
    <div>
      {Array.isArray(dataProduk) ? 
        dataProduk.map((produk) => <List_products key={produk.id} produk={produk} />) : 
        <p>加载中或无数据</p>
      }
    </div>
  );
};

export default Apasih;

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