React中使用setState更新输入值时reduce方法出现异常交互问题

你的问题核心在于React状态更新的异步性，加上用reUpdateTotal这个额外状态触发总和计算的方式，导致你在计算总和时拿到的是旧的quiz状态值，所以才会出现总和计算不准确、延迟更新的情况。下面给你两种清晰的解决方案：

方案一：更新问题时直接计算总分（推荐） #

既然我们在修改问题分值的过程中，已经能生成最新的questions数组，完全可以在这一步直接计算出总分，然后一次性更新整个quiz状态，不需要额外的useEffect触发，逻辑更简洁且避免异步问题。

修改handleUpdateQuestionScore函数：

const handleUpdateQuestionScore = (e) => {
  // 先生成更新后的questions数组
  const updatedQuestions = quiz.questions.map((child, index) =>
    index === selectedQuestion
      ? { ...child, value: parseInt(e.target.value) }
      : child
  );
  // 计算最新总分
  const newTotal = updatedQuestions.reduce((total, question) => total + question.value, 0);
  // 一次性更新quiz的questions和value字段
  setQuiz({
    ...quiz,
    questions: updatedQuestions,
    value: newTotal
  });
};

之后你可以完全移除reUpdateTotal状态和对应的useEffect，整个流程会变得更顺畅。

方案二：通过监听questions变化自动计算总分 #

如果你更倾向于把总分计算和问题更新逻辑分离，可以移除reUpdateTotal，让useEffect直接监听quiz.questions的变化。这里要注意使用函数式更新的setQuiz，避免因为异步更新拿到旧状态：

// 移除所有reUpdateTotal相关代码
useEffect(() => {
  const newTotal = quiz.questions.reduce((total, question) => total + question.value, 0);
  // 函数式更新确保拿到最新的quiz状态
  setQuiz(prevQuiz => ({
    ...prevQuiz,
    value: newTotal
  }));
}, [quiz.questions]); // 仅当questions数组变化时触发计算

原代码出错的原因解析 #

1. 状态更新的异步性：React的setState是异步操作，当你调用setQuiz更新questions后，quiz状态并不会立刻更新。此时立刻设置reUpdateTotal(true)，触发的useEffect里拿到的还是更新前的旧quiz，所以计算的总和自然不对。
2. 冗余的触发状态：reUpdateTotal完全是多余的，我们可以直接监听quiz.questions的变化来触发总分计算，不需要额外的开关。
3. 状态覆盖风险：在useEffect里再次调用setQuiz，如果同时有其他地方更新quiz，可能会导致状态被意外覆盖。

完整修改后的代码（方案一） #

import { useEffect, useState } from "react";
export default function App() {
  const [quiz, setQuiz] = useState({
    title: "",
    number: 6,
    questions: [
      { question: "q1", value: 0 },
      { question: "q2", value: 0 }
    ],
    value: 0 // 初始化总分
  });
  const [selectedQuestion, setSelectedQuestion] = useState(undefined);

  useEffect(() => {
    console.log("quiz", quiz);
  }, [quiz]);

  const handleUpdateQuestionScore = (e) => {
    const updatedQuestions = quiz.questions.map((child, index) =>
      index === selectedQuestion
        ? { ...child, value: parseInt(e.target.value) }
        : child
    );
    const newTotal = updatedQuestions.reduce((total, question) => total + question.value, 0);
    setQuiz({
      ...quiz,
      questions: updatedQuestions,
      value: newTotal
    });
  };

  return (
    <div className="App">
      <div>
        {quiz.questions.map((question, index) => (
          <div key={index}>
            <p>
              {question.question} - {question.value}
              <button onClick={() => setSelectedQuestion(index)}>select</button>
            </p>
            <br />
          </div>
        ))}
      </div>
      <br />
      <small>change value for question #{selectedQuestion}</small>
      {selectedQuestion !== undefined ? (
        <div>
          <input
            type="number"
            id="Value"
            name="Value"
            required="required"
            className="edit-input shadow"
            min="0"
            value={quiz.questions[selectedQuestion].value}
            onChange={(e) => handleUpdateQuestionScore(e)}
          />
          <button onClick={() => setSelectedQuestion(undefined)}>remove</button>
        </div>
      ) : (
        <div>nothing selected</div>
      )}
      <h1>current total score = {quiz.value}</h1>
    </div>
  );
}

这个版本的代码会确保每次更新问题分值时，总分都能实时、准确地同步更新，不会再出现之前的异常情况。

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