Quiero mostrar este consejo de esta API. Obtuve todos los datos, pero cuando intento mostrarlos, arroja el error, y también traté de mapear los datos, pero nada funciona, muestra errores.
import React, { useState, useEffect } from 'react'; export default function App() { const [advices, setAdvices] = useState([]); console.log(advices); // you should have the fetch data here async function fetchData() { try { const response = await fetch('https://api.adviceslip.com/advice'); const data = await response.json(); setAdvices(data.slip); } catch (error) { console.error(error); } } useEffect(() => { fetchData(); }, []); return <></>; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React, { useState, useEffect } from 'react'; export default function App() { const [advices, setAdvices] = useState([]); //advices will always be null here as initiated with empty array console.log(advices); // you should have the fetch data here async function fetchData() { try { const response = await fetch("http://jsonplaceholder.typicode.com/Posts"); const data = await response.json(); setAdvices(data); } catch (error) { console.error(error); } } useEffect(() => { fetchData(); }, []); useEffect(() => { console.log(advices); }, [advices]); return ( < > Test < />); }el valor inicial del consejo debe ser un objeto y no hubo otro problema grave códigos y enlace de caja
import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [advices, setAdvices] = useState([]); console.log(advices); // you should have the fetch data here async function fetchData() { try { const response = await fetch("https://api.adviceslip.com/advice"); const data = await response.json(); setAdvices(data.slip); } catch (error) { console.error(error); } } useEffect(() => { fetchData(); }, []); return ( <div className="App"> <h1>{advices.advice}</h1> </div> ); }