React复选框组件异常：取消时全清空、切换幻灯片后重置

问题现象 #

• 取消任意复选框时，所有复选框被清空，仅保留该取消项；
• 切换到下一张幻灯片再返回时，存储选中值的数组被重置为默认全选状态。

相关组件代码 #

import React from "react";
import { Checkbox } from "@carbon/react";

const CheckBoxInput = ({
  item,
  data,
  setSelectedCheckboxValues,
  selectedCheckboxValues,
}) => {
  const [isChecked, setIsChecked] = React.useState(true);

  React.useEffect(() => {
    setIsChecked(selectedCheckboxValues.includes(item.title));
  }, [selectedCheckboxValues, item.title]);

  const handleCheckBoxChange = React.useCallback(
    (event, { checked, id }) => {
      const updatedValues = selectedCheckboxValues.includes(id)
        ? selectedCheckboxValues.filter((val) => val !== id)
        : [...selectedCheckboxValues, id];
      setSelectedCheckboxValues(updatedValues);
    },
    [selectedCheckboxValues, setSelectedCheckboxValues]
  );

  return (
    <>
      <Checkbox
        onChange={handleCheckBoxChange}
        labelText={item.title}
        id={item.title}
        defaultChecked={isChecked}
      />
    </>
  );
};

export default CheckBoxInput;

预期行为 #

• 取消复选框时仅更新对应项，其余保持当前状态；
• 幻灯片切换不影响复选框状态及选中值数组。

问题更新 #

曾尝试通过组件挂载时的空依赖useEffect初始化选中数组，解决过部分场景问题：

React.useEffect(() => {
    if (slides[currentSlide]?.content) {
      const allCheckboxValues = slides[currentSlide].content.map(
        (item) => item.title
      );
      setSelectedCheckboxValues(allCheckboxValues);
    }
  }, []);

但当content数组不在幻灯片第一个元素时，问题复现。新的SLIDES数组结构如下：

const SLIDES = [
  {
    title: "Checkboxes",
    text: "We're gonna do 3 fundamental exercises.",
  },
  {
    title: "First, 10 push-ups",
    text: "Do 10 reps. Remember about full range of motion. Don't rush.",
    content: [
      { title: "Test1" },
      { title: "Test2" },
      { title: "Test3" },
      { title: "Test4" },
      { title: "Test5" },
    ],
    // ...rest of the elements
  },
];

解决思路 #

1. 修复复选框批量清空问题 #

• 替换defaultChecked为checked：defaultChecked仅在首次渲染生效，后续状态变更需用checked绑定实时状态，确保复选框能响应选中值变化。
• 使用函数式更新避免闭包问题：直接依赖setSelectedCheckboxValues，通过回调获取最新状态，避免捕获旧值导致的逻辑错误：

const handleCheckBoxChange = React.useCallback(
  (event, { checked, id }) => {
    setSelectedCheckboxValues(prev => 
      checked 
        ? [...prev, id] 
        : prev.filter(val => val !== id)
    );
  },
  [setSelectedCheckboxValues]
);

2. 修复幻灯片切换后状态重置问题 #

• 改用按幻灯片独立存储状态：将单一选中数组改为对象，以幻灯片索引/标题为key，存储对应幻灯片的选中值，实现不同幻灯片状态隔离：

// 父组件中修改状态定义
const [selectedStates, setSelectedStates] = React.useState({});

// 监听幻灯片切换，初始化或恢复状态
React.useEffect(() => {
  const currentSlideData = slides[currentSlide];
  if (currentSlideData?.content) {
    const slideKey = currentSlide; // 用索引作为唯一标识，或用title
    // 首次进入该幻灯片时初始化全选，否则保留之前的状态
    if (!selectedStates[slideKey]) {
      const allValues = currentSlideData.content.map(item => item.title);
      setSelectedStates(prev => ({ ...prev, [slideKey]: allValues }));
    }
  }
}, [currentSlide, slides, selectedStates]);

// 向子组件传递当前幻灯片的选中值与更新方法
const currentSelected = selectedStates[currentSlide] || [];
const updateSelected = (newValues) => {
  setSelectedStates(prev => ({ ...prev, [currentSlide]: newValues }));
};

3. 简化子组件状态 #

子组件无需维护独立的isChecked状态，直接通过父组件传递的选中值计算，避免状态不同步：

const CheckBoxInput = ({
  item,
  setSelectedCheckboxValues,
  selectedCheckboxValues,
}) => {
  const isChecked = selectedCheckboxValues.includes(item.title);

  const handleCheckBoxChange = React.useCallback(
    (event, { checked, id }) => {
      setSelectedCheckboxValues(prev => 
        checked 
          ? [...prev, id] 
          : prev.filter(val => val !== id)
      );
    },
    [setSelectedCheckboxValues]
  );

  return (
    <Checkbox
      onChange={handleCheckBoxChange}
      labelText={item.title}
      id={item.title}
      checked={isChecked}
    />
  );
};

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