tengo este problema. Estoy consultando una api en mi localhost con una aplicación en REACT.

 import React, {useEffect, useState} from "react"; import ListGroup from 'react-bootstrap/ListGroup'; import './List.scss' const List = () => { const [lista, SetLista] = useState() const url = "http://127.0.0.1:8000/api/template/" const fetchApi = async () => { console.log(">>>>>>>>>>>>>>>>>>") const response = await fetch(url) console.log(">>>>>>>>>>>>>>>>>>") const responseJSON = await response.json() console.log(responseJSON[0]) SetLista(responseJSON) } useEffect(() => { console.log("paso por aqui") fetchApi() }, []) console.log("%%%%%%%%%%") console.log(lista) console.log("%%%%%%%%%%") const Lista_front = () => { for(var x in lista){ console.log(lista[x]) } } return( <div> <h1>Lista de Templates</h1> {lista.map((li) => { <div> <ListGroup> <ListGroup.Item action> <h3>TEMPLATE: {li.tmp_name}</h3> </ListGroup.Item> </ListGroup> </div> })} </div> ) } export default List;

Al momento de querer renderizar las respuestas en una lista me genera el siguiente error:

 List.js:36 Uncaught TypeError: Cannot read properties of undefined (reading 'map') at List (List.js:36:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1)

Es como que no hizo el fetch a la api sino que de una vez el .map y por ende no hay nada en el array, alguien puede ayudarme?