使用 React 上的自定义钩子获取数据

Question

我正在使用 vercel 进行部署，但我不知道如何设置环境变量，所以我想尝试使用 fetch("/data.json") 的方法。我也有用于获取数据的自定义钩子。 但这不起作用，我什至看不到我本地的数据。 data.json 文件直接位于 /public 文件夹中。有人可以帮我吗？

useFetch.js

import { useState, useEffect } from "react";

export const useFetch = (url, method = "GET") => {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);
  const [options, setOptions] = useState(null);

  const postData = (postData) => {
    setOptions({
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(postData),
    });
  };

  useEffect(() => {
    const controller = new AbortController();
    const fetchData = async (fetchOptions) => {
      setIsPending(true);

      try {
        const res = await fetch(url, {
          ...fetchOptions,
          signal: controller.signal,
        });
        if (!res.ok) {
          throw new Error(res.statusText);
        }
        const json = await res.json();

        setIsPending(false);
        setData(json);
        setError(null);
      } catch (err) {
        if (err.name === "AbortError") {
          console.log("the fetch was aborted");
        } else {
          setIsPending(false);
          setError("Could not fetch the data");
        }
      }
    };
    if (method === "GET") {
      fetchData();
    }
    if (method === "POST" && options) {
      fetchData(options);
    }
    return () => {
      controller.abort();
    };
  }, [url, options, method]);
  return { data, isPending, error, postData };
};

TaskList.js

import { useFetch } from "../hooks/useFetch";

import { useFrequency } from "../hooks/useFrequency";

//images
import Dot from "../assets/icon-ellipsis.svg";

// styles
import "./TaskList.scss";

export default function TaskList() {
  // const [url, setUrl] = useState("http://localhost:3000/stats");
  const { data: stats, isPending, error } = useFetch("/data.json");

  const { frequency } = useFrequency();
  const urlDot = "#";
  return (
    <div className="main__inner">
      {isPending && <div>Loading stats...</div>}
      {error && <div>{error}</div>}
      <ul className="main__task-list">
        {stats &&
          stats.map((stat) => (
            <li
              className={
                stat.title === "Self Care"
                  ? "main__task-item selfcare"
                  : `main__task-item ${stat.title.toLowerCase()}`
              }
              key={stat.id}
            >
              <div className="main__task-item-container">
                <h3 className="main__task-title">{stat.title}</h3>
                <a href={urlDot} className="main__task-dot">
                  <img src={Dot} alt="more details" />
                </a>
                <span className="main__task-current">
                  {/* {frequency === "daily"
                    ? stat.timeframes.daily.current
                    : frequency === "weekly"
                    ? stat.timeframes.weekly.current
                    : stat.timeframes.monthly.current}
                  hrs */}
                  {stat.timeframes[frequency].current}hrs
                </span>
                <span className="main__task-previous">
                  {frequency === "daily"
                    ? "Yesterday"
                    : frequency === "weekly"
                    ? "Last Week"
                    : "Last Month"}{" "}
                  -{" "}
                  {
                    /* {frequency === "daily"
                    ? stat.timeframes.daily.previous
                    : frequency === "weekly"
                    ? stat.timeframes.weekly.previous
                    : stat.timeframes.monthly.previous} */
                    stat.timeframes[frequency].previous
                  }
                  hrs
                </span>
              </div>
            </li>
          ))}
      </ul>
    </div>
  );
}

Answer 1

从 GitHub 或其他存储库导入站点后，您可以在 Vercel 中配置环境变量。

您可以通过单击环境变量选项卡在“配置项目”窗口中进行设置。 见下图