Quiero crear un enlace personalizado que me permita obtener algunos datos cuando lo desee. El enlace debe devolver una función a la que pueda llamar en cualquier lugar dentro de mi código para obtener los datos, y también una variable que luego contenga la respuesta. Además, debería devolverme el estado de la búsqueda.
Mi gancho se ve así:
import React, { useState } from "react"; import { AppListResponse } from "../../typings/AppListResponse"; const useFetchAppList = ( userId: string, authToken: string ): [() => Promise<void>, (value: React.SetStateAction<string>) => void, string, AppListResponse | null | undefined] => { const [status, setStatus] = useState<string>("idle"); const [responseData, setData] = useState<AppListResponse | null>(); const url = `https://my-endpoint.com/lets-fetch-this`; const options = { method: "GET", headers: { CustomAuthToken: authToken, UserID: userId, Accept: "application/json", "Content-Type": "application/json" } }; const fetchAppList = async (): Promise<void> => { setStatus("fetching"); try { const response = await fetch(url, options); const json = await response.json(); setData(json); setStatus("successful"); } catch (error) { console.log("error", error); } }; return [fetchAppList, setStatus, status, responseData]; }; export default useFetchAppList;Intento llamarlo así:
const [fetchAppList, setStatus, status, data] = useFetchAppList(userId, authToken); useEffect(() => { const fetchData = async (): Promise<void> => { await fetchAppList(); }; fetchData(); console.log(data, status); }, []); El problema es que console.log(data) devuelve undefined y el status tiene el valor predeterminado con el que comienza, que es idle .
¿Cómo puedo hacer que esto funcione, de modo que pueda llamar a fetchAppList() cuando lo necesite, lo que a su vez devolverá los datos que necesito?
En el archivo del componente (segundo código, donde está llamando a useFetchAppList ), debe capturar los data y el status fuera del useEffect que especificó. El useEffect en su código se ejecuta solo una vez en el procesamiento inicial y recuerda (cierra) el valor de data y el status en el momento en que se invoca. Que inicialmente se establece como undefined e "idle" por el useFetchAppList .
Para ver lo que realmente está sucediendo, agregue el código a continuación también a su segundo archivo
useEffect(() => { console.log(data, status); }); Verá diferentes elementos de la consola. Primero estaría "idle" , luego debería estar "fetching" y finalmente sería "successful" or "error"