我从pokeapi调用一个对象，确切地说是name属性，在保存文件后第一次呈现时，我得到了名称，但我不知道为什么，重新呈现，然后propertie为null，我得到了一个错误
这是我组件卡

import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Avatar, Card, Col, Row } from "antd";

function Pokecard(values: any) {
  const { response} = values;

  const { Meta } = Card;
  return (
    <Row gutter={[10, 10]}>
        <Col>
          <Card
            style={{ width: 300 }}
            cover={
              <img
                alt={"" }
                src={response && response['sprites']['front_default']}
              />
            }
            actions={[
              <SettingOutlined key="setting" />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title={response.name}
              description=""
            />
          </Card>
        </Col>
    </Row>
  );
}

export default Pokecard;

这是我的看法

import { Methods } from "../interfaces/request";
import { useEffect, useState } from "react";
import Pokecard from "../components/pokecard/Pokecard";
import useAxios from "../plugins/Useaxios";

function App2() {
  const { response, loading, error } = useAxios({
    method: Methods["get"],
    url: "/ditto",
    body: JSON.stringify({}),
    headers: JSON.stringify({}),
  });
  const [data, setData] = useState([]);

  useEffect(() => {
    if (response !== null) {
      setData(response);
    }
  }, [response]);
  let args: any = {
    response,
  };
  return (
    <>
      <Pokecard {...args} />;
    </>
  );
}

export default App2;

这是我的插件axios

import axios from "axios";
import Request from "../interfaces/request";
import { useState, useEffect } from "react";
enum Methods {
  get = "get",
  post = "post",
  default = "get",
}

const useAxios = ({ url, method, body, headers }: Request) => {
  axios.defaults.baseURL = "https://pokeapi.co/api/v2/pokemon";
  const [response, setResponse] = useState(null);
  const [error, setError] = useState("");
  const [loading, setloading] = useState(true);

  const fetchData = () => {
    axios[method](url, JSON.parse(headers), JSON.parse(body))
      .then((res: any) => {
        setResponse(res.data);
      })
      .catch((err: any) => {
        setError(err);
      })
      .finally(() => {
        setloading(false);
      });
  };

  useEffect(() => {
    fetchData();
  }, [method, url, body, headers]);

  return { response, error, loading };
};

export default useAxios;

我正在学习解构物体
我试图在商店中保存对象，但我得到了一个未定义的
对不起我的英语