React.js中如何在map函数内实现分数状态的递增？

核心问题分析 #

1. 状态更新异步性：React状态更新是异步的，你在setQuizData后直接console.log(count)打印的是更新前的旧值，所以看起来始终为0，实际状态可能已经更新，需用useEffect监听count变化才能看到最新值。
2. map内状态更新逻辑混乱：你在遍历答案的map里调用setScore会导致多次触发状态更新，且代码存在变量错误（比如...answer应为...i，selectedAns等变量未定义）、条件判断冗余（重复判断i.id === selectedAnsId）。

解决方案一：先判断对错更新分数，再更新题目状态（推荐） #

将分数更新与题目状态更新分离，逻辑更清晰，避免嵌套混乱：

function handleSelect(id, selectedAnsId) {
  setQuizData((prevQuizData) => {
    // 先定位当前题目和正确答案
    const currentQuestion = prevQuizData.find(q => q.id === id);
    const correctAns = currentQuestion?.correct_answer;
    // 获取选中的答案内容
    const selectedAnswer = currentQuestion?.answers.find(i => i.id === selectedAnsId)?.answer;

    // 选中正确答案时更新分数
    if (selectedAnswer === correctAns) {
      setScore(prev => prev + 1);
    }

    // 再更新题目选中状态
    return prevQuizData.map((question) => {
      if (question.id !== id) return question;

      return {
        ...question,
        answers: question.answers.map((i) => {
          const isSelected = i.id === selectedAnsId;
          return {
            ...i,
            isSelected,
            selectedAns: isSelected ? i.answer : undefined
          };
        })
      };
    });
  });

  // 不要直接在这里打印count，用以下代码监听最新值：
  // useEffect(() => {
  //   console.log('当前分数:', count);
  // }, [count]);
}

解决方案二：在map中标记对错，统一更新分数 #

如果需要在遍历过程中处理，可先标记是否答对，最后统一更新分数，避免多次触发状态更新：

function handleSelect(id, selectedAnsId) {
  let isAnswerCorrect = false;

  setQuizData((prevQuizData) => {
    return prevQuizData.map((question) => {
      if (question.id !== id) return question;

      const correctAns = question.correct_answer;
      return {
        ...question,
        answers: question.answers.map((i) => {
          const isSelected = i.id === selectedAnsId;
          // 标记是否选中正确答案
          if (isSelected && i.answer === correctAns) {
            isAnswerCorrect = true;
          }
          return {
            ...i,
            isSelected,
            selectedAns: isSelected ? i.answer : undefined
          };
        })
      };
    });
  });

  // 遍历结束后统一更新分数
  if (isAnswerCorrect) {
    setScore(prev => prev + 1);
  }
}

关键注意事项 #

• 禁止在map循环内多次调用setScore，否则会触发多次状态更新，既影响性能又易出bug。
• 状态更新是异步的，不要在setState后立即打印状态值，必须用useEffect监听状态变化查看最新值。
• 修正代码中的变量错误：比如原代码里的...answer应为...i，correctAns: selectedAns中的selectedAns未定义等语法问题，这些错误会直接导致逻辑失效。

内容的提问来源于stack exchange，提问作者Cable-Nerd