React.js+TS问答游戏：跳转至问题页后API数据不显示求助

核心问题分析 #

• API返回格式不匹配：The Trivia API在limit=1时返回的是包含单个问题对象的数组，但代码直接将整个响应数组赋值给了currentQuestion，而currentQuestion期望的是单个Question对象，导致无法读取question等属性。
• 空值边界未处理：当currentQuestion为null时，answers数组会包含undefined，执行map会引发错误，页面也无法正常渲染内容。

修复步骤 #

1. 修正API服务的返回处理 #

修改TriviaAPI函数，从返回的数组中提取第一个问题对象：

import axios from "axios";
import { Question } from "../context/PlayerContext";

export default function TriviaAPI(category: string, difficulty: string): Promise<Question> {
  return axios
    .get<Question[]>(`https://the-trivia-api.com/api/questions?categories=${category}&limit=1&difficulty=${difficulty}`)
    .then((res) => {
      // 提取数组中的第一个问题对象
      return res.data[0];
    })
}

2. 优化Question组件的空值处理 #

渲染前先判断currentQuestion是否存在，同时修正答案数组的生成逻辑：

import React, {useContext} from 'react'
import PlayerContext from '../context/PlayerContext'

export default function Question() {
    const{currentQuestion} = useContext(PlayerContext);

    if (!currentQuestion) {
        return <div>加载中...</div>;
    }

    // 合并正确与错误答案并打乱顺序
    const answers = [
        currentQuestion.correctAnswer,
        ...currentQuestion.incorrectAnswers
    ].sort(() => Math.random() - 0.5);

    return (
        <div>
            <h1>{currentQuestion.category}</h1>
            <p>{currentQuestion.question}</p>
            {answers.map((answer, index) => 
                <button key={index}>{answer}</button>
            )}
        </div>
    )
}

3. （可选）增强跳转稳定性 #

调整spinWheel函数，确保API请求完成后再更新跳转状态，避免网络延迟导致跳转时currentQuestion未更新：

const spinWheel = () => {
  setIsSpinning(true);
  const randomCategory = categories[Math.floor(Math.random() * categories.length)];
  
  // 等待API请求完成后再执行后续逻辑
  TriviaAPI(randomCategory.uri, difficulty).then(data => {
    resetCurrentQuestion(data);
    setRandomCategoryClass(randomCategory.class);
    setTimeout(() => {
        setSpinResult(randomCategory);
        setIsSpinning(false);
        setScreen("chosen");
    }, 6000);
  })
};

额外说明 #

• 原代码中answers仅初始化了正确答案，遗漏了错误选项，修复后合并两类答案并打乱顺序，符合问答游戏逻辑。
• 为map生成的按钮添加key属性，符合React列表渲染规范。

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