React+TypeScript受控复选框组勾选状态与值更新问题

• 所有复选框绑定了同一个布尔状态isBoxChecked控制选中态，状态变更时所有组件同步更新，必然出现点一个全选/全不选的问题。
• 多选中复选框组不需要单独维护单个复选框的布尔选中状态，唯一可信数据源应该是存储所有选中值的字符串数组，单个复选框的选中态直接从数组派生即可，多数据源维护必然出现状态不一致。
• 传入CheckBoxGroup的value属性是字符串'12'，和定义的string[]状态类型不匹配，是TS类型报错的直接诱因。

import { useState } from 'react';
// 省略CheckBox、CheckBoxGroup组件导入

export default function CheckBoxGroupDemo() {
    // 初始化空数组即可，无需默认塞入空字符串
    const [selectedValues, setSelectedValues] = useState<string[]>([]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const checkedValue = e.target.value;
        const isChecked = e.target.checked;

        setSelectedValues(prevValues => {
            // 勾选：值不存在于已选数组时追加；取消勾选：从数组中过滤掉对应值
            if (isChecked) {
                return prevValues.includes(checkedValue) 
                    ? prevValues 
                    : [...prevValues, checkedValue];
            }
            return prevValues.filter(val => val !== checkedValue);
        });
    };

    return (
        <>
            {/* CheckBoxGroup的value绑定数组状态，和类型定义完全对齐 */}
            <CheckBoxGroup name="GroupTest" value={selectedValues} onChange={handleChange}>
                <CheckBox
                    value="value"
                    name="name1"
                    isDisabled={false}
                    // 选中态直接从已选数组派生：当前值在数组中即为选中
                    isChecked={selectedValues.includes('value')}
                    id="id1"
                >
                    Child label
                </CheckBox>
                <CheckBox
                    value="value2"
                    name="name2"
                    isDisabled={false}
                    isChecked={selectedValues.includes('value2')}
                    id="id2"
                >
                    Child label 2
                </CheckBox>
            </CheckBoxGroup>
        </>
    );
}

• 直接删除冗余的isBoxChecked布尔状态，所有选中状态统一从selectedValues派生，从根源避免多数据源同步问题。
• 更新状态时使用函数式写法获取上一轮的状态值，规避React闭包导致的旧状态问题。
• 子复选框不需要单独绑定onChange事件，CheckBoxGroup会统一接管冒泡的change事件，减少冗余代码。
• 动态渲染选项时直接遍历配置数组即可，无需硬编码单个复选框，示例：

const optionList = [
    { value: 'value', name: 'name1', label: 'Child label', id: 'id1' },
    { value: 'value2', name: 'name2', label: 'Child label 2', id: 'id2' }
];

// 替换JSX中硬编码的CheckBox部分
{optionList.map(option => (
    <CheckBox
        key={option.id}
        value={option.value}
        name={option.name}
        isDisabled={false}
        isChecked={selectedValues.includes(option.value)}
        id={option.id}
    >
        {option.label}
    </CheckBox>
))}

• 类型对齐要求：CheckBoxGroup接收的value属性必须和状态类型一致为string[]，即可解决TS类型不匹配报错。

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