[React] Problema con map nella visualizzazione di dati acquisiti da un server remoto

[tulipan]

Buongiorno,

sto cercando di visualizzare dei dati acquisiti da un server remoto in forma tabellare.
Per questo mi sono creato un componente ListEmployeeComponent, ma ottengo in fase di compilazione l'errore: map non è una funzione. Non ne capisco il motivo.

import React,{useState, useEffect} from 'react';
import EmployeeService from '../services/EmployeeService';
import {useParams,  useNavigate } from 'react-router-dom';

const ListEmployeeComponent=()=>{
    const[employees,setEmployees]=useState([]);
    const params = useParams();
    console.log(params.id);
    
    useEffect(()=>{
       
        EmployeeService.getEmployees().then(result =>{
         setEmployees(result);
         console.log("Risultato ottenuto dalla fetch", result);
        })
    },[])



    
    return (
        <div>
             <h2 className="text-center">Employees List</h2>
             <div className = "row">
                <button className="btn btn-primary" onClick=""> Add Employee</button>
             </div>
             <br></br>
             <div className = "row">
                    <table className = "table table-striped table-bordered">

                        <thead>
                            <tr>
                                <th> Employee First Name</th>
                                <th> Employee Last Name</th>
                                <th> Employee Email Id</th>
                                <th> Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                employees.map(
                                    employee => 
                                    <tr key = {employee.id}>
                                         <td> {employee.firstName} </td>   
                                         <td> {employee.lastName}</td>
                                         <td> {employee.emailId}</td>
                                         <td>
                                             <button onClick="" className="btn btn-info">Update </button>
                                             <button style={{marginLeft: "10px"}} onClick="" className="btn btn-danger">Delete </button>
                                             <button style={{marginLeft: "10px"}} onClick="" className="btn btn-info">View </button>
                                         </td>
                                    </tr>
                                )
                            }
                        </tbody>
                    </table>

             </div>

        </div>
    )

}

export default ListEmployeeComponent;

Qualcuno mi può aiutare?
Grazie
Tulipan

[ninja72]

Ho provato il tuo codice e sembra funzionare, anche se ho dovuto ricreare la parte dell'EmployeeService catturando i dati direttamente da un file data.json e non da un endpoint definito.
Il problema sembra essere proprio nella fetch, assiscurati che il dato ritornato sia un array di oggetti altrimenti map non verrà riconosciuto su quel tipo di dato.

su result cosa ottieni ?

console.log("Risultato ottenuto dalla fetch", result);