Блог

Я хочу создать пользовательский хук, который позволит мне извлекать некоторые данные, когда мне это нравится. Крючок должен возвращать функцию, которую я могу вызвать в любом месте моего кода для извлечения данных, а также переменную, которая затем содержит ответ. Кроме того, он должен вернуть мне статус выборки.

Мой крючок выглядит так:

 import React, { useState } from "react"; import { AppListResponse } from "../../typings/AppListResponse";  const useFetchAppList = (  userId: string,  authToken: string ): [() =gt; Promiselt;voidgt;, (value: React.SetStateActionlt;stringgt;) =gt; void, string, AppListResponse | null | undefined] =gt; {  const [status, setStatus] = useStatelt;stringgt;("idle");  const [responseData, setData] = useStatelt;AppListResponse | nullgt;();   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 (): Promiselt;voidgt; =gt; {  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;  

Я пытаюсь назвать это так:

 const [fetchAppList, setStatus, status, data] = useFetchAppList(userId, authToken);  useEffect(() =gt; {  const fetchData = async (): Promiselt;voidgt; =gt; {  await fetchAppList();  };   fetchData();  console.log(data, status); }, []);  

Проблема в том , что console.log(data) возвращает undefined , и status имеет значение по умолчанию, с которого оно начинается, то есть idle .

Как я могу заставить это работать, чтобы я мог звонить fetchAppList() в любое время, когда мне нужно, что, в свою очередь, вернет нужные мне данные?

В файле компонента (второй код, из которого вы вызываете useFetchAppList ) вам необходимо захватить data и status за пределами указанного useEffect вами. useEffect В вашем коде выполняется только один раз при начальной визуализации, и он запоминает(закрывает) значение data и status во время его вызова. Который изначально задается как undefined и "idle" крючком useFetchAppList .

Чтобы увидеть, что на самом деле происходит, добавьте приведенный ниже код также во второй файл

 useEffect(() =gt; {  console.log(data, status); });  

Вы увидите различные элементы консоли. Сначала это было "idle" бы, потом это должно было "fetching" быть, и, наконец, это было бы "successful" or "error"