useEffect(() => { document.title = View Orders | Bothub ;
fetch(`${backendAppUrl}/orders/all`, { ...getRequestParams("POST", { uid: localStorage.uid, idToken: localStorage.idToken, user: 0, pagination: 1, }), }) .then((res) => res.json()) .then( (res) => { console.log(res); if (res.detail === "db-error" || res.detail === "forbidden") { setError(true); setLoading(false); } else { const val = res.data; setOrders(val); setLoading(false); } }, (err) => { console.log(err); setError(true); setLoading(false); } ); // eslint-disable-next-line}, []);
¿Por qué se muestra así y arroja un error? Rechazo no controlado (TypeError): no se pueden leer las propiedades de nulo (leyendo 'detalle')
Si esto se muestra null en la consola:
console.log(res); Luego, la respuesta JSON estaba vacía (aunque de alguna manera sigue siendo válida, supongo) y no hay ningún objeto para usar. Entonces, el código debe poder manejar un valor null en res . Por ejemplo:
if (res?.detail === "db-error" || res?.detail === "forbidden") { setError(true); setLoading(false); } else { const val = res?.data; setOrders(val); setLoading(false); } Esto utiliza un encadenamiento opcional seguro contra nulos para examinar las propiedades de res o simplemente devolver null . Entonces, cuando res es null , la condición if será false y el bloque else se ejecutará.
Alternativamente, si desea que el sistema maneje null de manera diferente, realizaría esa verificación en su lógica. Por ejemplo:
if (!res) { // respond to null in some way here } else if (res.detail === "db-error" || res.detail === "forbidden") { setError(true); setLoading(false); } else { const val = res.data; setOrders(val); setLoading(false); } De cualquier forma que lo estructure, el punto es que res es null y su código asume que no lo es, lo que produce el error.