React useState未更新，调用OpenAI生成Quiz后组件未重渲染

问题排查与解决方案 #

1. 确认渲染时的quiz状态值

在渲染的JSX中添加实时日志，明确组件渲染时quiz的实际长度：

<div className="quiz-output">
  {console.log('Current quiz length during render:', quiz.length)}
  {quiz.length > 0 ? (
    quiz.map((q, index) => (
      <div key={index} className="quiz-question">
        <h3>{q.question}</h3>
        <p>{q.text}</p>
        {Object.keys(q.options).map(option => (
          <label key={option}>
            <input
              type="radio"
              name={`question-${index}`}
              value={option}
              checked={answers[index] === option}
              onChange={() => handleAnswerChange(index, option)}
            />
            {option}) {q.options[option]}
          </label>
        ))}
      </div>
    ))
  ) : (
    <p>No questions generated yet.</p>
  )}
</div>

如果此处打印的长度为0，但useEffect日志显示长度大于0，说明状态更新存在异常；若长度一致但UI仍未渲染，需检查parseQuiz返回的数组元素是否有效。

2. 修复parseQuiz的格式兼容问题

核心问题大概率是parseQuiz依赖的#### Question分割符与OpenAI实际返回格式不匹配。OpenAI通常会返回1. Question或Question 1:这类常见题号格式，修改函数适配通用格式：

const parseQuiz = (quizText) => {
  console.log("Parsing quiz text:", quizText);
  // 匹配题目起始的正则：兼容数字+点、Question 数字:两种格式
  const questionBlocks = quizText.split(/(?=\d+\. |Question \d+:)/);
  // 过滤空块，避免无效元素
  return questionBlocks.filter(block => block.trim()).map((block, index) => {
    const lines = block.trim().split('\n').filter(line => line.trim());
    if (lines.length === 0) return null;
    // 移除题号前缀，提取纯题目文本
    const questionText = lines[0]
      .replace(/^\d+\. /, '')
      .replace(/^Question \d+: /, '')
      .trim();
    // 提取A-D选项
    const options = lines.slice(1).reduce((acc, line) => {
      const match = line.match(/^([A-D])\) (.+)$/);
      if (match) {
        acc[match[1]] = match[2].trim();
      }
      return acc;
    }, {});
    // 仅返回包含4个有效选项的题目
    return Object.keys(options).length === 4 ? 
      { question: `Question ${index + 1}`, text: questionText, options } : 
      null;
  }).filter(q => q !== null);
};

该函数能兼容更多OpenAI输出格式，同时过滤无效题目，确保quiz数组元素都是可渲染的有效对象。

3. 优化状态更新的可追踪性

在setQuiz后添加日志，确认状态更新的触发：

const quizQuestions = parseQuiz(generatedQuiz);
console.log("Parsed quiz questions:", quizQuestions);
setQuiz(quizQuestions);
// 打印待更新的数组值，与useEffect日志对比
console.log("Setting quiz to:", quizQuestions);

结合useEffect中的日志，确认状态更新的完整性。

4. 优化组件key值

避免使用index作为组件key，改用题目文本作为唯一标识，减少潜在渲染异常：

<div key={q.text} className="quiz-question">
  <h3>{q.question}</h3>
  <p>{q.text}</p>
  {/* 选项渲染逻辑 */}
</div>

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