创建一个可以在我需要时获取数据并返回一个函数来获取数据的钩子答案

【问题标题】：Create a hook that can fetch data when I want and return a function to fetch and the data创建一个可以在我需要时获取数据并返回一个函数来获取数据的钩子
【发布时间】：2022-01-09 07:14:08
【问题描述】：

我想创建一个自定义挂钩，让我可以随时获取一些数据。钩子应该返回一个函数，我可以在代码中的任何地方调用它来获取数据，以及一个保存响应的变量。此外，它应该将获取的状态返回给我。

我的钩子是这样的：

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;

我试着这样称呼它：

const [fetchAppList, setStatus, status, data] = useFetchAppList(userId, authToken);

useEffect(() => {
    const fetchData = async (): Promise<void> => {
        await fetchAppList();
    };

    fetchData();
    console.log(data, status);
}, []);

问题是console.log(data)返回undefined，而status的默认值是idle。

我怎样才能完成这项工作，以便我可以在需要时调用fetchAppList()，从而返回我需要的数据？

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案1】：

在组件文件中（第二个代码，您调用useFetchAppList ），您需要在您指定的useEffect 之外捕获data 和status。代码中的 useEffect 在初始渲染时只运行一次，它会记住（关闭）data 和 status 在调用时的值。最初通过钩子useFetchAppList 设置为undefined 和"idle"。

要查看实际发生的情况，请将以下代码添加到您的第二个文件中

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

您将看到不同的控制台项目。首先是"idle"，然后是"fetching"，最后是"successful" or "error"

【讨论】：