當重新渲染反應時，object 是 null

Question

我從 pokeapi 調用 object，正是 name 屬性，在保存文件后第一次渲染時我得到了名稱，但我不知道為什么，重新渲染然后屬性是 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;

我正在學習解構對象

我嘗試在商店中保存 object，但我得到了一個未定義的

對不起我的英語不好

Answer 1

你可以嘗試這樣的事情

title={response?.name || ''}

Answer 2

嘗試直接使用 resonse

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

  const name = response?.name;

  const src = response?.sprites?.?front_default;

  // use the properties directly inside the child
  return (
    <>
      <Pokecard name={name} src={src}/> 
    </>
  );

您可以查看何時不需要 useEffect 的示例