React中scores状态变更时totalScore变量无法更新显示求助

你的问题出在totalScore是普通变量，不受React状态管理，所以无法触发组件更新，而且每次组件渲染都会被重置为0。

两种可行的解决办法 #

方法1：将totalScore转为状态变量 #

用useState管理totalScore，更新时调用setTotalScore触发组件重新渲染：

const [scores, setScores] = useState([]);
const [totalScore, setTotalScore] = useState(0);

useEffect(() => {
  // 用reduce计算总和比forEach更简洁
  const sum = scores.reduce((acc, curr) => acc + curr, 0);
  setTotalScore(sum);
}, [scores]);

return (
  <>
    <p>{totalScore}</p>
  </>
);

方法2：直接在渲染时计算总和 #

不需要额外的状态和useEffect，组件每次渲染时自动计算最新的总和：

const [scores, setScores] = useState([]);
// 每次scores变化，组件重新渲染时都会重新计算这个值
const totalScore = scores.reduce((acc, curr) => acc + curr, 0);

return (
  <>
    <p>{totalScore}</p>
  </>
);

为什么原代码无效？ #

1. 普通变量totalScore在组件每次渲染时都会重新执行let totalScore = 0，被重置为初始值；
2. 即使在useEffect里修改了totalScore，也不会通知React更新组件，所以页面上的数值始终显示初始的0。

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