En un botón onClick tengo una función que hace una petición GET y recibe una matriz json. Cuando trato de mostrárselo al usuario, nada cambia, aunque si coloco un archivo console.log dentro del mapa, sí muestro e itero todos los objetos.
fetch('http://localhost:3000/GetApunte',{ method: 'GET', headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }) .then(response=>response.json()) .then(responseJson => { this.datosCargados=true; this.anotaciones=responseJson; //cuerpo() return( <tbody> {this.anotaciones.map((anotacion, index)=>{ const {titulo, body} = anotacion return( <tr key={index}> <td>{titulo}</td> <td>{body}</td> </tr> ) })} </tbody> ); });La estructura de mi clase es así:
export default class Apuntes extends React.Component{ state ={} getApuntes(){} render(){ return( <button onClick={()=> this.getApuntes()}>Mostrar Apuntes</button> ) } }Las anotaciones están dentro del estado, por eso uso this.anotaciones
No puede simplemente devolver datos de una promesa directamente al componente React, ya que no sería fácil controlar el estado del flujo de datos entre una función asíncrona y un componente síncrono. Intenta seguir esta práctica:
const [arr, setArr] = useState([]) // array empty on init async fetch() { return fetchedArray; // get array from remote } useEffect(() => { fetchdArray().then(fetchedArr => setArr(fetchedArr); }, []); // this is equal to componentDidMount in class component return (<div>{arr.map(...)}</div>) De esta manera, el arr siempre se actualiza su estado en la pantalla, desde vacío hasta poblado.
En lugar de devolver el JSX en la promesa, simplemente guarde las anotaciones en el estado. Puede extraer la generación de la tabla en una función separada, como
const generarAnotaciones = () => <tbody> {this.anotaciones.map((anotacion, index) => { const { titulo, body } = anotacion return ( <tr key={index}> <td>{titulo}</td> <td>{body}</td> </tr> ) })} </tbody>Entonces tu clase debería ser algo como esto:
export default class Apuntes extends React.Component { state = {} getApuntes() { } render() { return ( <> <button onClick={() => this.getApuntes()}>Mostrar Apuntes</button> {generarAnotaciones()} </> ) } }