TypeScript React中API数据获取后DOM不更新问题求助

问题根源 #

你调用的JokeAPI返回两种格式的笑话：

• 双段式（type: "twopart"）：包含setup和delivery字段
• 单段式（type: "single"）：仅包含joke字段

你的代码只渲染了setup和delivery，当获取到单段式笑话时，joke?.setup为undefined，因此页面显示"nothing"——但实际上状态已经更新，只是没有正确渲染单段式内容。

修复后的代码 #

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

const JokeContainer = () => {
  interface Joke {
    category: string;
    type: "single" | "twopart";
    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>(null);

  return (
    <>
      {/* 根据笑话类型渲染对应内容 */}
      <p>{joke?.type === "twopart" ? joke.setup : joke?.joke ?? "nothing"}</p>
      {/* 仅双段式笑话显示delivery */}
      {joke?.type === "twopart" && <p>{joke.delivery}</p>}
      <Button onClick={fetchJoke} color="danger">
        获取新笑话
      </Button>
    </>
  );
};

export default JokeContainer;

关键修改点 #

• 给Joke接口的type字段添加明确约束："single" | "twopart"，类型检查更严谨
• 渲染逻辑根据type字段分支处理：双段式显示setup+delivery，单段式直接显示joke字段
• 调整useState初始值为null，与类型定义保持一致

这样无论API返回哪种类型的笑话，都能正确渲染，不会再出现"nothing"的异常情况。

内容的提问来源于stack exchange，提问作者Skorejen