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

I am beginner of React and node js. When we fetch data from the data and pass into the table. I got this error

Uncaught TypeError: employees.map is not a function

I tested the code from the postman it is working fine. In order to connect to the React ran into problem. What I tried so far I attached below.

<table  align="center">
  <thead>
    <tr>
      <th scope="col">Employee Id</th>
      <th scope="col">Employee Name</th>
      <th scope="col">Employee Address</th>
      <th scope="col">Employee Mobile</th>
      
      <th scope="col">Option</th>
    </tr>
  </thead>
       {employees.map(function fn(employee)
       {
            return(
            <tbody>
                <tr>
                <th scope="row">{employee._id} </th>
                <td>{employee.name}</td>
                <td>{employee.address}</td>
                <td>{employee.phone}</td>        
                <td>
                    <button type="button"   onClick={() => editEmployee(employee)} >Edit</button>  
                    <button type="button"  onClick={() => DeleteEmployee(employee._id)}>Delete</button>
                </td>
                </tr>
            </tbody>
            );
            })}
            </table>
       </div>
            );
        }

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

function CustomerCrud()
{
  const [_id, setId] = useState('');
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [phone, setMobile] = useState("");
  const [employees, setUsers] = useState([]);

useEffect(() => {
  (async () => await Load())();
  }, []);

  async function  Load()
  {
     const result = await axios.get(
         "http://localhost:8000/user/getAll");
         setUsers(result.data);
         console.log(result.data);`
  }

Console Format

Object
data
: 
Array(1)
0
: 
address
: 
"indiafabiiii"
name
: 
"kobi"
phone
: 
"53423332"
__v
: 
0
_id
: 
"63a3d39df8a99b15db6eb9f6"
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)
status
: 
true

Postman

{
    "status": true,
    "data": [
        {
            "_id": "63a3d39df8a99b15db6eb9f6",
            "name": "kobi",
            "address": "indiafabiiii",
            "phone": "53423332",
            "__v": 0
        }
    ]
}

CodePudding user response：

Axios return data in the data object. So, you have to get an array by two-time destructuring. result.data.data

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

function CustomerCrud()
{
  const [_id, setId] = useState('');
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [phone, setMobile] = useState("");
  const [employees, setUsers] = useState([]);

useEffect(() => {
  (async () => await Load())();
  }, []);

  async function  Load()
  {
     const result = await axios.get(
         "http://localhost:8000/user/getAll");
         setUsers(result.data.data);
         console.log(result.data);`
  }