Axios Get 在我的 React 组件中返回一个空数组

Question

这是我的组件，我需要从后端加载数据。

import {
  Card,
  CardBody,
  CardFooter,
  Flex,
  Image,
  Spacer,
} from "@chakra-ui/react";
import CardIcon from "./CardIcon";
import DescriptionText from "./DescriptionText";
import placeholder from "../images/placeholder.jpg";
import useCards, { GauntletCard } from "../hooks/useCards";

const PlayingCard = () => {
  const { data } = useCards();

  //console.log(data[0]);

  return (
    <Card
      height="350px"
      width="250px"
      backgroundColor="rgba(228, 209, 188, 0.8)"
    >
      <CardBody>
        <Flex>
          <CardIcon />
          <Spacer />
          <CardIcon />
        </Flex>
        <Image padding="10px" fallbackSrc={placeholder}></Image>
      </CardBody>
      <CardFooter>
        <DescriptionText />
      </CardFooter>
    </Card>
  );
};

export default PlayingCard;

这是我的钩子和服务：

import useData from "./useData";


export interface GauntletCard {
    id: number;
    title: string;
}

const useCards = () => 
  useData<GauntletCard>('cards/?format=json');

export default useCards;'

'import { useEffect, useState } from "react";
import { AxiosRequestConfig, CanceledError } from "axios";
import apiClient from "../services/api-client";
  
interface FetchReponse<T> {
    count: number;
    results: T[];
  }

const useData = <T>(endpoint: string, requestConfig?: AxiosRequestConfig, deps?: any[]) => {
    const [data, setData] = useState<T[]>([]);
    const [error, setError] = useState("");
    const [isLoading, setLoading] = useState(false)

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

    setLoading(true);

    apiClient
      .get<FetchReponse<T>>(endpoint, {
        signal: controller.signal, ... requestConfig       })
      .then((res) => {
        setData(res.data.results);
        setLoading(false);
      })
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setError(err.message);
        setLoading(false);
      });
    return () => controller.abort();
  }, deps ? [...deps] : []);

  return { data, error, isLoading };
}

export default useData;

api-client.ts 文件：

import axios from "axios";

export default axios.create({
    baseURL: 'http://127.0.0.1:8000/', // TEMP: development server
})

对于 PlayingCard 组件中的数据变量，我得到一个空数组，而检查工具中的有效负载预览显示 json 对象。这就是为什么我倾向于前端 React 应用程序中的问题。另外，当我将 URL + 端点 + 参数放入浏览器时，我看到了漂亮的 JSON 对象。

任何有关如何解决问题的帮助将不胜感激。

附带问题：

1. 在浏览器中看到 URL 正常工作是否意味着问题出在前端？
2. 我在 StrictMode 下运行 React，这意味着我得到 2 个渲染 = 2 个有效负载。第一个有效负载出现错误“无法加载响应数据：未找到具有给定标识符的资源的数据”，但第二个有效负载具有 JSON 对象。这与我面临的问题有什么关系吗？或者这正常吗？

谢谢你，

Answer 1

我的端点错误：'cards/?format=json' 而不是“cards?format=json”。

FML