Estoy aprendiendo a reaccionar, y cuando aprendo sobre cómo obtener datos, me pregunto si solo podemos renderizar react-dom después de obtener datos con éxito, es decir, si no obtenemos datos, no ejecutaremos ningún código más, hago un ejemplo. aquí
import "./styles.css"; import axios from "axios"; import { useEffect, useState } from "react"; export default function App() { const [data, loadData] = useState([]); useEffect(() => { const dataRes = async () => await axios .get("https://jsonplaceholder.typicode.com/todos/1") .then((res) => res.data) .then((data) => loadData(data)); dataRes(); }, []); console.log("data", data); console.log("userId", data.userId); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }El código anterior, siempre devuelve algo como:
data "" userId undefined data {userId: 1, id: 1, title: "delectus aut autem", completed: false} userId en consola! Como puede ver, toma un momento recuperar los datos y si quiero usar userId de usuario, por ejemplo, devolverá undefined, y tal vez la aplicación enfrente un error con esto.
Entonces, mi pregunta, como se mencionó anteriormente, ¿cómo podemos obtener datos completos antes de hacer algo, y si inicio sesión, siempre devuelve los datos reales, no los inacabados, por lo que no puedo evitar un error muy molesto como, "foo is undefined" o "bar unexpected token u in json at position 0" ==> estoy seguro de que este error se debe a uno indefinido
Aquí está el codesanbox para eso https://codesandbox.io/s/hopeful-framework-j4pjq?file=/src/App.tsx
muchas gracias por la ayuda
ACTUALIZACIÓN: olvidé el segundo console.log, lo edité
Su código está realmente bien y solo puede agregar:
if (!data.userId) return null // or some spinner or just <div>Waiting for data to load...</div>Se agregó su ejemplo, donde hace algo después de:
https://codesandbox.io/s/quirky-moore-cmgso
O incluso mejor, solo busque en Google React Suspense : es realmente genial y puede resolver sus problemas.
El error alrededor de bar unexpected token u in json at position 0 no está relacionado y probablemente se deba a un JSON mal formado, cuando intenta usar JSON. parse puede suceder si no espera a json, tal vez tenga comillas dentro de comillas, asegúrese de que las comillas estén bien ...muchas cosas pueden salir mal.