Question

我正在尝试在另一个组件中使用http钩子来发送get请求。发布请求运行正常。但是，当我尝试获取请求时，在控制台记录我的结果时，我只会返回“ true”。当我在邮递员中发送相同的get请求时，我会获得正确的数据，因此这不是后端问题。

挂钩：

import { useState, useCallback, useRef, useEffect } from "react";

export const useHttpClient = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState();
  const [success, setSuccess] = useState(false);

  const activeHttpRequests = useRef([]);

  const sendRequest = useCallback(
    async (url, method = "GET", body = null, headers = {}) => {
      setIsLoading(true);
      const httpAbortController = new AbortController();
      activeHttpRequests.current.push(httpAbortController);

      try {
        setErrors();
        setSuccess(false);
        const response = await fetch(url, {
          method: method,
          body: body,
          headers: headers,
          signal: httpAbortController.signal,
        });

        const responseData = await response.json();
        activeHttpRequests.current = activeHttpRequests.current.filter(
          (reqCtrl) => reqCtrl !== httpAbortController
        );

        if (response.status !== 200) {
          setErrors(responseData);
          return responseData;
        } else {
          setSuccess(true);
          return true;
        }
      } catch (err) {
        //setErrors(err.message);
        setErrors([
          "There was an error submitting your form, please try again later.",
        ]);
        setIsLoading(false);
        throw err;
      }
    },
    []
  );

  //useEffect can also be used for cleanup
  useEffect(() => {
    return () => {
      activeHttpRequests.current.forEach((AbortController) =>
        AbortController.abort()
      );
    };
  }, []);

  return { isLoading, errors, sendRequest, success };
};

服务器调用：

  useEffect(() => {
    const fetchFaq = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:8000/api/myEndpoint"
        );
        console.log(responseData);
        setLoadedFaq(responseData);
      } catch (err) {}
    };
    fetchFaq();
  }, [sendRequest]);

Answer 1

您的钩子得到200响应码后将返回true：

if (response.status !== 200) {
  setErrors(responseData);
  return responseData;
} else {
  setSuccess(true);
  return true;
}

如果它得到非200码，则仅返回responseData。只需从钩子中返回数据即可。

http提取返回true而不是实际数据

1 个答案: