在useEffect回调中，您可以迭代dummyArray并将预先选择的每个复选框的值添加到计数中。

import Checkbox from "./Checkbox";

const dummyArray = [
  { name: "checkbox 1", value: 5, isPreselected: true },
  { name: "checkbox 2", value: 5, isPreselected: true },
  { name: "checkbox 3", value: 5, isPreselected: false }
];

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

  useEffect(() => {
    const initialValue = 0;
    const preselectedValues = dummyArray
      .filter((item) => item.isPreselected)
      .map((item) => item.value);
    const total = preselectedValues.reduce(
      (accumulator, currentValue) => accumulator + currentValue,
      initialValue
    );
    setCount(total);
  }, []);

  return (
    <div>
      {dummyArray.map((item, index) => (
        <Checkbox
          key={index}
          name={item.name}
          value={item.value}
          isPreselected={item.isPreselected}
          count={count}
          setCount={setCount}
        />
      ))}
      <p>{count}</p>
    </div>
  );
}

问题出在setState的初始值。应该是10，但在本例中设置为0。要为每个选中的框计数5，可以执行以下操作：

const [count, setCount] = useState(dummyArray.filter(item=>item.isPreselected).length * 5);

它将计算选中的复选框并乘以5。