error: Uncaught TypeError: .map is not a function-CodePudding

im having problem fetching api with .map function

i always got error (Apasih.js:23 Uncaught TypeError: dataProduk.map is not a function).

can someone please help me solve this problem?

here is my code

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('http://35.158.139.90:5000/produk')
      .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;

CodePudding user response：

dataProduk is either an object, or undefined, you are assigning result.data.data are you sure that is correct?

CodePudding user response：

You first need validated if the response is a Array, for example, the request code is 200 and that is ok but the data should be null or the response would change the type of the useState.