React中如何修改fetch请求获取到的数据？

你的代码未生效主要有三个核心问题：

• OpenTDB的API返回的是包含results字段的对象，而非直接的数组，直接对data调用map会报错
• 处理完数据后未将其存入React的state，导致页面无法获取到修改后的数据
• 仅给选项添加了isSelected布尔值，未按要求添加ID字段

正确实现步骤 #

首先定义state存储处理后的题目数据：

const [questions, setQuestions] = useState([]);

然后修改useEffect中的请求逻辑：

useEffect(() => {
  fetch("https://opentdb.com/api.php?amount=5&category=10&difficulty=easy&type=multiple")
    .then((res) => res.json())
    // 取出API返回的真正题目数组results
    .then((data) => data.results.map((question, qIndex) => ({
      ...question,
      // 给每个题目添加唯一ID，可复用API返回的question_id或自定义
      id: question.question_id || `question-${qIndex}`,
      // 处理错误选项，添加ID和isSelected字段
      incorrect_answers: question.incorrect_answers.map((answer, aIndex) => ({
        id: `answer-${qIndex}-${aIndex}`,
        content: answer,
        isSelected: false
      })),
      // 给正确选项也统一格式，方便后续统一处理
      correct_answer: {
        id: `answer-${qIndex}-correct`,
        content: question.correct_answer,
        isSelected: false
      }
    })))
    // 将处理完成的数据存入state
    .then(processedData => setQuestions(processedData))
    // 捕获请求异常
    .catch(err => console.error("请求失败:", err));
}, []);

关键说明 #

• 必须从data.results中获取题目数组，这是API返回结构的要求
• 给每个选项生成唯一ID时，可通过题目索引+选项索引的组合保证唯一性，也可直接使用API返回的question_id拼接
• 最后一定要调用setQuestions将处理后的数据存入state，这样组件才能感知到数据变化并触发更新

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