是否可以在Reactjs中创建可重用的函数

Question

我想在独立的 JavaScript 文件中创建一个可重用的函数，我可以使用该函数使用 GET 方法将两个 json 形式的参数发送到 API，该方法将返回一个我可以在家里使用的 json 文件.js 文件。我认为这是可以做到的，但不确定如何或是否是更好的方法。 我很想知道 Reactjs 中执行此操作的最佳实践是什么。

这是请求json：

{ "exam_id": 1, "question_id": 22 }

这是预期返回的 json:

[
    {
        "Choice_1": "choice 1",
        "Choice_2": "choice 2",
        "Choice_3": "choice 3",
        "Choice_4": "choice 4",
        "Choice_5": "choice 5",
        "Question": "This field represents the question to be asked.",
        "QuestionID": 22,
        "Scenario": "something needed to expand on the question asked.",
        "Answer": "correct answer for question."
    }
]

我当前的工作环境和版本：

1. Windows 操作系统
2. MS VSCode IDE
3. 反应：18.3.1
4. npm：10.8.0
5. npx：10.8.0

我已经创建了以下内容，但尚未运行。 这就是我来这里提问的原因。

文件名：Question.js 内容：

import React from 'react';

function GetQuestion() {
    
    const fetchData = async () => {
        const request_url = 'http://127.0.0.1:5000/exam/question';
        const request_json= '{"exam_id": '+{exam_id}+', "question_id": '+{question_id}+'}';
        const request={request_url} + '?' + {request_json};
        const response = await fetch(request);
        const response_data = await response.json();
        setData(response_data);
    };

    return fetchData()
}

export default GetQuestion;

Answer 1

因此，当您不显示组件本身时，很难准确地知道您的问题。这是使用钩子发出请求的示例。在此示例中，我有 2 个钩子，一个在初始渲染时发出获取请求，另一个基于状态变量的更改（在您的情况下它将是表单）

app.tsx

import { useEffect, useState } from "react";
import { useGetPlanets } from "./useGetPlanets";
import { useGetDataFromUrl } from "./useGetDataFromUrl";

export default function App() {
  const [selectedPlanet, setSelectedPlanet] = useState<Record<string, any>>({});

  // Both hooks must remain consistently triggered on all renders. meaning between update of state both hooks must be triggered. you can pass in state to avoid over fetching

  const planetsData = useGetPlanets();
  const selectedPlanetData = useGetDataFromUrl(selectedPlanet?.url);

  return (
    <main>
      <h3>{selectedPlanetData?.name}</h3>
      <ul>
        {planetsData.map((planet: any, i: number) => {
          return (
            <li
              key={planet.name + i}
              style={{ cursor: "pointer" }}
              onClick={() => setSelectedPlanet(planet)}
            >
              {planet.name}
            </li>
          );
        })}
      </ul>
    </main>
  );
}

使用GetPlanets.ts

import { useEffect, useState } from "react";

export const useGetPlanets = () => {
  const [planetsData, setPlanetsData] = useState([]);
  const fetchPlanets = async () => {
    const res = await fetch("https://swapi.dev/api/planets/", {
      method: "GET",
    });
    const data = await res.json();
    setPlanetsData(data?.results);
  };

  useEffect(() => {
    fetchPlanets();
  }, []);

  return planetsData;
};

使用GetDataFromUrl.ts

import { useEffect, useState } from "react";

const useGetDataFromUrl = (url: string) => {
  const [data, setData] = useState<Record<string, any>>({});
  const fetchDataByUrl = async () => {
    try {
      const res = await fetch(url, {
        method: "GET",
      });
      if (!res.ok) throw new Error("Fetch Error!");
      const data = await res.json();

      setData(data);
    } catch (err) {
      console.error("Error:", err);
    }
  };

  useEffect(() => {
    fetchDataByUrl();
  }, [url]);

  return data;
};

我不会在如此肤浅构建的应用程序中推荐这种方法，因为它会在每次重新渲染时触发提取。制定条件来防止这种情况发生。但希望这能让您走上正确的道路，重新使用 async/await 和 hook 中的状态