如何使用 fetch 功能并在组件上显示 api 响应？自定义获取响应未传递给组件

Question

从 api 获取 /Vehicles 后，我想在组件中显示它们，但在 useFetch 函数中我可以 console.log res.data 但在卡车组件中我无法映射卡车。

我的自定义 useFetch 函数：

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetch = (url) => {
  const api = axios.create({
    baseURL: 'api url',
    headers: { Authorization: `Bearer ${localStorage.token}` },
  });

  const [data, setData] = useState(null);

  const [isPending, setIsPending] = useState(true);

  const [error, setError] = useState(null);

  useEffect(() => {
    const abortCont = new AbortController();

    setTimeout(() => {

      api
        .get(url)
        .then((res) => {
          console.log(res.data);
          if (!res.ok) {
            throw Error('Could not with fetch data');
          }
        })
        .then((data) => {
          data.json();
          console.log(data);
          setIsPending(false);
          setError(null);
        })
        .catch((err) => {
          if (err.name === 'AbortError') {
            console.log('fetch aborted');
          } else {
            setIsPending(false);
            setError(err.message);
          }
        });
    }, 1000);

    return () => abortCont.abort();
  }, [url]); 
  return { data, isPending, error };
};

export default useFetch;

我使用了这个自定义的 useFetch 函数，并且可以获取数据（在函数内部）它不能用于渲染 我认为的一些可能的原因；

• useFetch 函数可能无法正确返回数据
• 我可能需要对 API 响应使用 stringify 或 json 函数

卡车组件：

const Trucks = () => {
  const { data: trucks, error, isPending } = useFetch('/vehicles');// 
  console.log('they are ' + { trucks }); //console output ->[object,Object]

  return (Some Jsx)};

export default Trucks; 

谢谢

Answer 1

我可以看到您的 Hook 本身存在两个问题。

第一件事是你从不打电话给setData。这意味着，尽管您在钩子中获取数据并对其进行处理，但您从未设置 data 对象来保存检索到的数据。

第二件事是第二个then 实际上并没有对您正在检索的数据做任何事情。您可以在第一条语句中处理这一切

.then((res) => {
    setData(res.data);
    setIsPending(false);
    if (!res.ok) {
        setIsPending(false);
        throw Error("Could not with fetch data");
    }
})

一旦你这样做了，你应该能够在相关组件中调用你的钩子，并使用一些 JSX 渲染它。只需确保在实际呈现数据之前添加对 isPending 的检查并显示某种加载屏幕即可。

另外注意，在使用axios的时候，不需要调用data.json()。这是 fetch API 所必需的，但 axios 只要求您在解决承诺时调用 res.data