数组状态更新异常：复选框状态修改后页面未即时刷新

云原生阿岚

2026-8-9

问题原因与解决方案

问题根源

你直接修改了状态数组内的嵌套对象属性，随后将原数组引用传入setArrayGrupoNiveis。React通过引用比对判断状态是否更新，由于原数组的引用未发生变化，React会判定状态无变更，因此不会即时触发页面重渲染。只有当其他操作改变了状态引用时，才会顺带刷新复选框的状态显示。

修复方案

遵循React状态的不可变性原则，修改嵌套对象时需创建新的数组和对象副本，确保状态引用发生变化。修复后的handleCheckBox函数如下：

const handleCheckBox = (e: any) => {
    const eleId = parseFloat(e.target.id);
    // 创建新数组，避免修改原状态
    const newArrayGrupoNiveis = arrayGrupoNiveis.map((nivelItem: any) => {
        // 检查当前nivelItem的filhos是否包含目标id
        const hasTargetFilho = nivelItem.filhos.some((filho: any) => filho.id === eleId);
        if (!hasTargetFilho) {
            return nivelItem;
        }
        // 创建新的filhos数组，修改目标对象的marcado属性
        const newFilhos = nivelItem.filhos.map((filho: any) => {
            if (filho.id === eleId) {
                // 返回新对象，不修改原对象
                return { ...filho, marcado: !filho.marcado };
            }
            return filho;
        });
        // 返回新的nivelItem对象
        return { ...nivelItem, filhos: newFilhos };
    });
    setArrayGrupoNiveis(newArrayGrupoNiveis);
};