Comment afficher les données d'un tableau en javascript réactif à partir d'une liste d'objets ?

Je suis quelques tutoriels sur youtube, il montre des données avec succès mais ce sont des données codées en dur, et je veux prendre des données du backend. Les données arrivent avec succès (je les vois sur la console avec console.log) mais je n'ai pas pu les afficher dans le tableau.

Voici mon code:

import React, { useEffect, useState } from 'react';
import * as ReactBootStrap from 'react-bootstrap';
import * as service from '../service/FetchCustomerService';
function MainPanel() {
 const [customers, setCustomers] = useState([]);
 
 useEffect(() => {
 const fetchPostList = async () => {
 const response = await service.getCustomerList();
 setCustomers({ response });
 console.log(response.data)
 };
 fetchPostList()
 }, [setCustomers]);
 return (
 <ReactBootStrap.Table striped bordered hover>
 <thead>
 <tr>
 <th>ID</th>
 <th>FirstName</th>
 <th>LastName</th>
 </tr>
 </thead>
 <tbody>
 {customers &&
 customers.map((item) => (
 <tr key={item.id}>
 <td>{item.id}</td>
 <td>{item.firstName}</td>
 <td>{item.lastName}</td>
 </tr>
 ))}
 </body>
 </ReactBootStrap.Table>
 );
}
export default MainPanel;

Voici la méthode de service asynchrone pour obtenir des données :

export async function getCustomerList() {
 return axios.get("http://localhost:8080/customer/list"); 
}

Le backend renvoie avec succès 5 données dans une liste, mais je n'ai pas pu l'afficher sur la table. Dans l'exemple, la sortie de la console est celle qui imprime d'abord la liste avec succès, puis

Uncaught TypeError: customers.map is not a function
 at MainPanel (MainPanel.js:29:1)
 at renderWithHooks (react-dom.development.js:16141:1)
 at updateFunctionComponent (react-dom.development.js:20313:1)
 at beginWork (react-dom.development.js:22356:1)
 at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
 at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
 at invokeGuardedCallback (react-dom.development.js:4270:1)
 at beginWork$1 (react-dom.development.js:27243:1)
 at performUnitOfWork (react-dom.development.js:26392:1)
 at workLoopSync (react-dom.development.js:26303:1)

Comment puis-je afficher les données?

Solution du problème

Vous pouvez obtenir le résultat de l'API en response.datautilisant axios.

Vous n'avez pas besoin d'ajouter setCustomers(fonction React setState) car il est créé par useState.

Selon la documentation de React,

React garantit que l'identité de la fonction setState est stable et ne changera pas lors des nouveaux rendus. C'est pourquoi il est prudent d'omettre de la liste des dépendances useEffect ou useCallback.

useEffect(() => {
 const fetchPostList = async () => {
 const response = await service.getCustomerList();
 setCustomers(response.data);
 console.log(response.data)
 };
 fetchPostList()
 }, []);