如何在React TypeScript中保存子组件CheckboxWindow的勾选状态

我有一个基于TypeScript/React的应用，包含三个组件：

• MainMenu：用户从复选框列表中选择部分车辆。
• CheckboxWindow：一个弹窗窗口，仅包含在MainMenu中选中的车辆的复选框列表。
• CheckboxGroup：一个复选框列表组件。

需要实现CheckboxWindow的状态保存功能，要求：

1. 用户关闭并重新打开窗口时，之前勾选的复选框仍处于选中状态。
2. 能处理MainMenu中车辆选择的变更（比如用户新增或取消选中部分车辆）。

现有代码如下：

// Parent Component ------ ------ ------ ------
interface State {
    showCheckboxWindow: boolean;
    selectedCars: string[];
}

export class MainMenu extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {
            showCheckboxWindow: false,
            selectedCars: [];
        };
    }
    
    public render() {
        return (
            {this.state.showCheckboxWindow && (
                <CheckboxWindow
                    setSelectedCars={(selectedCars: string[]) => this.setState({ selectedCars })}
                    selectedCars={this.state.selectedCars}
                    onCancel={() => this.setState({ showCheckboxWindow: false })}
                />
            )}
        );
    }
}


// Child Component ------ ------ ------ ------


interface Props {
    selectedCars: string[];
    setSelectedCars: (selectedCars: string[]) => void;
    onCancel: () => void;
}

export const CheckboxWindow: React.FC<Props> = props => {
    // cars selected from MainMenu
    const cars = useSelector((store: StoreState) => store.mainMenu).selectedCars;
    
    const [checkedBoxes, setCheckedBoxes] = React.useState<boolean[]>([]);

    return (
        <Window>
            <CheckboxGroup
                values={cars} // string[] values of checkboxes
                checked={checkedBoxes} // boolean[] tracks which boxes are checked
                // onChange is called when a checkbox is clicked
                onChange={(checked, value, i) => {
                    const newGroups = [...checkedBoxes];
                    newGroups[i] = !newGroups[i];
                    setCheckedBoxes(newGroups);
                                    
                    // stores string[] of selected cars in parent's state
                    // unfinished attempt at saving checked boxes when window closes
                    let selectedCars = props.selectedCars;
                    if (checked && !props.selectedCars.includes(value)) {
                        selectedCars.push(value);
                        props.setSelectedCars(selectedCars);
                    } else if (!checked && props.selectedCars.includes(value)) {
                        selectedCars = selectedCars.filter(car => car != value);
                        props.setSelectedCars(selectedCars);
                    }
                    
                }}
            />
        </Window>
    );
};

// CheckboxGroup.d.ts
import * as React from 'react';
export interface CheckboxGroupProps {
    values: string[];
    checked?: boolean[];
    onChange: (checked: boolean, value: string, i: number) => void;
}
declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
export default CheckboxGroup;

目前的困惑：

• 不确定如何将selectedCars的字符串数组映射为checkedBoxes的布尔数组。
• 不确定当前实现方向是否正确。
• 无法修改CheckboxGroup组件本身。

核心思路 #

将CheckboxWindow中用户勾选的车辆状态**统一存储在MainMenu的state（或全局store）**中，而非依赖弹窗内部的临时状态。这样弹窗关闭后状态不会丢失，同时能自动响应MainMenu的车辆列表变更。

具体实现步骤 #

1. 替换临时状态，实时生成勾选状态数组
   移除CheckboxWindow内部的checkedBoxes状态，改用useMemo根据父组件传入的selectedCars和当前弹窗的车辆列表cars，实时生成对应布尔数组：每辆车存在于selectedCars中则为true，否则为false。

2. 重构CheckboxWindow组件
   优化状态更新逻辑，严格遵循React不可变数据原则：

interface Props {
    selectedCars: string[];
    setSelectedCars: (selectedCars: string[]) => void;
    onCancel: () => void;
}

export const CheckboxWindow: React.FC<Props> = props => {
    const cars = useSelector((store: StoreState) => store.mainMenu).selectedCars;

    // 实时生成checked数组：仅在cars或selectedCars变化时重新计算
    const checked = React.useMemo(() => {
        return cars.map(car => props.selectedCars.includes(car));
    }, [cars, props.selectedCars]);

    const handleCheckboxChange = (checkedState: boolean, value: string) => {
        let newSelectedCars;
        if (checkedState) {
            // 新增勾选：避免重复添加
            newSelectedCars = props.selectedCars.includes(value) 
                ? [...props.selectedCars] 
                : [...props.selectedCars, value];
        } else {
            // 取消勾选：过滤掉目标车辆
            newSelectedCars = props.selectedCars.filter(car => car !== value);
        }
        props.setSelectedCars(newSelectedCars);
    };

    return (
        <Window>
            <CheckboxGroup
                values={cars}
                checked={checked}
                onChange={(checkedState, value) => handleCheckboxChange(checkedState, value)}
            />
        </Window>
    );
};

3. 处理MainMenu的车辆变更
   当MainMenu中用户新增/移除车辆时，cars数组会更新，useMemo会自动重新计算checked数组：

   • 新增的车辆若之前在selectedCars中，会自动处于勾选状态；
   • 移除的车辆若之前被勾选，可根据业务需求选择是否保留在selectedCars中（当前代码会自动过滤，若需保留可调整过滤逻辑）。

4. 修复MainMenu初始化语法错误
   修正state初始化时的语法问题：

constructor(props: Props) {
    super(props);
    this.state = {
        showCheckboxWindow: false,
        selectedCars: [] // 修正原代码中的分号为逗号
    };
}

关键说明 #

• 状态统一存储在父组件，弹窗关闭后状态不会丢失，重新打开时自动恢复勾选状态。
• useMemo避免了不必要的数组计算，提升组件性能。
• 始终创建新数组更新状态，避免直接修改原数组导致的React状态更新异常。

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