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

Question

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

我的自定义 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 函数可能 return 数据不正确
我可能需要使用 stringify 或 json 函数来 API 响应

卡车组件：

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 只需要您在解析 promise

时调用 res.data

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

How to use fetch function and show api response on component ? Custom fetch response is not passing to component

reactjs

fetch-api

axios

react-component

react-hooks