页面加载时React的count状态值初始化错误，如何修复？

问题根源 #

你遇到的问题是useState更新具有异步性，直接在初始化时多次调用setCount(count + value)，每次调用都会基于**初始的count值（0）**计算，导致最终只累加了一次5，结果为5而非预期的10。

方案一：直接计算初始count值（推荐） #

无需依赖useEffect，在useState初始化时就通过数组计算出默认选中项的总和：

import { useState } from "react";

const dummyArray = [
  { name: "a", value: 5, isPreselected: true },
  { name: "b", value: 5, isPreselected: true },
  { name: "c", value: 5, isPreselected: false }
];

export default function App() {
  // 直接计算初始选中项的总和
  const initialCount = dummyArray.reduce(
    (total, item) => item.isPreselected ? total + item.value : total,
    0
  );
  const [count, setCount] = useState(initialCount);

  const handleChange = (e) => {
    const { checked, value } = e.target;
    setCount(prev => checked ? prev + Number(value) : prev - Number(value));
  };

  return (
    <div className="App">
      <h1>{count}</h1>
      {dummyArray.map((item) => (
        <div key={item.name}>
          <input
            type="checkbox"
            name={item.name}
            value={item.value}
            checked={item.isPreselected}
            onChange={handleChange}
          />
          <label>{item.name}</label>
        </div>
      ))}
    </div>
  );
}

方案二：使用函数式更新修复useEffect逻辑 #

如果一定要用useEffect初始化count，需要使用setCount的函数式更新，确保每次更新都基于最新的state值：

import { useState, useEffect } from "react";

const dummyArray = [
  { name: "a", value: 5, isPreselected: true },
  { name: "b", value: 5, isPreselected: true },
  { name: "c", value: 5, isPreselected: false }
];

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    dummyArray.forEach(item => {
      if (item.isPreselected) {
        // 使用函数式更新，基于前一次的state计算新值
        setCount(prevCount => prevCount + item.value);
      }
    });
  }, []);

  const handleChange = (e) => {
    const { checked, value } = e.target;
    setCount(prev => checked ? prev + Number(value) : prev - Number(value));
  };

  return (
    <div className="App">
      <h1>{count}</h1>
      {dummyArray.map((item) => (
        <div key={item.name}>
          <input
            type="checkbox"
            name={item.name}
            value={item.value}
            checked={item.isPreselected}
            onChange={handleChange}
          />
          <label>{item.name}</label>
        </div>
      ))}
    </div>
  );
}

额外说明 #

• 函数式更新setCount(prev => ...)是处理多次依赖state更新的关键，它能保证每次更新都使用最新的state值，避免异步更新导致的覆盖问题。
• 方案一更高效，因为它不需要额外的useEffect执行，直接在组件初始化时就完成了正确的count赋值。

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