Soy nuevo en React JS y todavía tengo dificultades para dominar algunos conceptos.
Estoy tratando de hacer un manejo de errores para mi código y solo mostrar la respuesta de la API solo después de que se completa la recuperación.
A continuación tengo mi código, que es lo que he hecho.
import React, { useState, useEffect } from "react"; function Transaction({ response }) { const [transaction, setTransaction] = useState([]); const token = "2c506c6b-d880-36bb-bdba-a035d1464b35"; const requestOptions = { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, }; useEffect(() => { fetch( "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/transaction/5KISDW53", requestOptions ) .then((response) => response.json()) .then((data) => setTransaction(data)); }, []); // console.log(transaction.result.details[0].vouchers[0].result); return ( <> <div> Hello <b>Transaction Status:</b> {transaction.status} <br /> </div> </> ); } export default Transaction;Y a continuación se muestra cómo estoy tratando de hacer un manejo limpio de errores. ¿Puede alguien ayudarme, o al menos referirme a dónde puedo aprender a hacer esto correctamente?
import React, { useState, useEffect } from "react"; function Transaction({ response }) { const [transaction, setTransaction] = useState([]); const token = "2c506c6b-d880-36bb-bdba-a035d1464b35"; const requestOptions = { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, }; function handleErrors(response) { if (!response.ok) { throw Error(response.statusText); } return response; } useEffect(() => { fetch( "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/transaction/5KISDW53", requestOptions ) .then(handleErrors) .then((response) => console.log("ok")) .catch((error) => console.log(error)) .then((response) => response.json()) .then((data) => setTransaction(data)); }, []); // console.log(transaction.result.details[0].vouchers[0].result); return ( <> <div> <b>Transaction Status:</b> {transaction.status} <br /> </div> </> ); } export default Transaction;Un problema que veo es que está devolviendo implícitamente el resultado nulo de un registro de la consola en la cadena de Promesa, por lo que más tarde las funciones no reciben el valor de respuesta JSON desempaquetado.
useEffect(() => { fetch( "......", requestOptions ) .then(handleErrors) .then((response) => console.log("ok")) // <-- returns undefined! .catch((error) => console.log(error)) .then((response) => response.json()) // <-- can't call `json()` of undefined! .then((data) => setTransaction(data)); }, []); Parece que está preguntando sobre el procesamiento de búsqueda. Sugeriría verificar la respuesta ok antes de devolver el json , justo allí en línea. Si desea esperar condicionalmente para mostrar cualquier contenido obtenido, use un estado de carga.
Ejemplo:
function Transaction({ response }) { const [loading, setLoading] = useState(true); const [transaction, setTransaction] = useState(); const requestOptions = { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, }; useEffect(() => { setLoading(true); fetch( ".....", requestOptions ) .then((response) => { if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then((data) => { setTransaction(data) }) .catch((error) => { console.log(error) }) .finally(() => { setLoading(false); }); }, []); if (loading) { return null; // or loading spinner/etc } return ( <> {transaction ? ( <div> <b>Transaction Status:</b> {transaction.status} <br /> </div> ) : <div>No transaction data</div> } </> ); } Si desea mostrar algún error, agregue algún estado de error y alguna lógica de representación condicional para mostrarlo, similar al transaction state .
puede usar la representación condicional en reaccionar.
return ( { transaction.length === 0 ? <></> : <> <div> <b>Transaction Status:</b> {transaction.status} <br /> </div> </> } ) puede usar la carga o cualquier cosa que desee en lugar de <></> y también cualquier otra condición adecuada para la existencia de datos.