Puedo mostrar los datos en la consola pero no puedo mostrarlos en la página DOM usando react . He visto este problema, pero ninguna de las respuestas realmente funciona para mí. ¿Puede decirme a dónde voy? ¿Estoy accediendo a la información incorrecta en SetData ()?
function Test() { const [loading, SetLoading] = useState(false); const [questions, SetData] = useState(null); const getData = async () => { try { const info = await axios.get("http://localhost:3000/info").then((res) => { console.log(res); SetData(res.data.info); }); SetLoading(true); } catch (err) { console.log(err); } }; useEffect(() => { getData(); }, []); return <div>{loading ? questions : <ReactBootstrap.Spinner animation="border" variant="success" />}</div>; } export default Test;Formato de datos API:
{ "info": [ { "question": "Angular 2 integrates easily with NativeScript, allowing you to code your native app in a . . . . . . . . . style that can run on any mobile device platform.", "options": ["a) declarative", "b) imperative", "c) interrogative", "d) exclamatory"], "answer": 0, "id": 0 }, { "question": "Angular 2 components can be described using ________is a way to do some meta-programming.", "options": [ "a) controllers, controller", "b) Loaders, loader", "c) typescripts, typescript", "d) decorators, decorator" ], "answer": 3, "id": 1 }, { "question": "The ______ directive substitutes the normal href property and makes it easier to work with route links in Angular 2.", "options": ["a) RouterLink", "b) RouterRend", "c) RouterLike", "d) RouterLayer"], "answer": 0, "id": 2 } ] }captura de pantalla de la página de reacción para mayor claridad
Está configurando los datos en la función "entonces" con esperar, por lo tanto, primero configure los datos, y después de configurar la carga en verdadero, ahora su carga se mantiene en la pantalla.
Primero debe configurar la carga y luego configurar los datos.
const getData = async () => { try { //First set loading in true SetLoading(true); //Then call request const info = await axios.get("http://localhost:3000/info").then((res) => { console.log(res); //Set data in state SetData(res.data.info); //remove loading to display the data SetLoading(false); }); } catch (err) { console.log(err); } };La respuesta que obtiene de su llamada a la API incluye una matriz llamada data . Está tratando a res.data como un objeto al intentar acceder a res.data.info . Esto devolverá indefinido y, por lo tanto, nunca actualizará el estado de sus questions . He reescrito tu código a continuación. Espero que esto funcione (si no es así, es un paso en la dirección correcta). También lo he cambiado de tal manera que cuando se llama getData() , lo primero que sucede es que la loading se establece en verdadero, luego se realiza la llamada a la API y luego la loading se vuelve a establecer en falso.
function Test() { const [loading, setLoading] = useState(true); const [questions, setQuestions] = useState(); const getData = async () => { try { setLoading(true) await axios.get("http://localhost:3000/info").then(res => { setQuestions(res.data); setLoading(false); }); } catch (err) { console.log(err); } }; useEffect(() => { getData(); }, []); return <div> {loading ? <ReactBootstrap.Spinner animation="border" variant="success" /> : questions} </div>; } export default Test;