如何在TypeScript React中先获取数据,然后显示数据

因此,我试图简单地从一个笑话API中提取数据,然后以纯文本的形式将其显示在页面上。 我遇到的问题是,有时数据(笑话)显示得很好,有时我得到了数据,但DOM没有改变,结果是“什么都没有”。

我似乎错过了传播React元素的一些东西,但我就是看不出我错过了什么。

有人能帮我解决这个问题吗?

这是我的代码:

import React, { useState } from "react";
import { Joke } from "../App";
import Button from "./Button";

const JokeContainer = () => {
  interface Joke {
    category: string;
    type: string;
    setup: string;
    delivery?: string;
    joke?: string;
  }

  async function fetchJoke() {
    const response = await fetch("https://v2.jokeapi.dev/joke/Programming");
    const json = await response.json();
    setJoke(json);
  }

  const [joke, setJoke] = useState<null | Joke>();

  return (
    <>
      <p>{joke?.setup ?? "nothing"}</p>
      <p>{joke?.delivery}</p>
      <Button onClick={fetchJoke} color="danger">
        My Button
      </Button>
    </>
  );
};

export default JokeContainer;

谢谢你的帮助!:)