React CheckboxTree自定义onCheck后复选框无法勾选问题求助

问题根源 #

React CheckboxTree组件的checked状态要求是存储选中节点标识的数组，你自定义onCheck回调时，错误地将setChecked的参数设置为单个布尔值checkState，状态类型与组件预期不匹配，导致复选框无法正常更新勾选状态。

修复代码 #

保留组件对checked状态的数组要求，先更新选中节点数组，再执行你的额外业务逻辑：

import { useState } from "react";

function MyComponent() {
    const [checked, setChecked] = useState([]);
    // 建议把classCode等变量声明为组件状态，避免直接赋值导致的状态不一致
    const [classCode, setClassCode] = useState('');
    const [viewRequired, setViewRequired] = useState(false);
    const [formatRequired, setFormatRequired] = useState(false);

    return (
        <CheckboxTree
            nodes={listItems}
            iconsClass="fa5"
            checked={checked}
            data={classData}
            onCheck={(checkedNodes, node) => {
                // 优先更新复选框的选中状态数组
                setChecked(checkedNodes);
                
                // 再执行你的业务逻辑
                if (node.parent.length > 0) {
                    setClassCode(node.parent);
                    setViewRequired(node.viewRequired);
                    setFormatRequired(node.formatRequired); 
                }
            }}
        /> 
    );
}

补充说明 #

• CheckboxTree的onCheck回调第一个参数checkedNodes就是当前所有选中节点的标识数组，直接用它更新checked状态即可保持组件正常工作。
• 如果你直接赋值classCode这类变量，会导致变量更新无法触发组件重新渲染，建议用useState声明为组件状态，通过setter方法更新。

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