React+Immer中setState后操作下一状态的优化方案咨询

问题 #

我使用TypeScript、React和Immer管理状态，系统中有一个配置列表（Profile List），每个配置（Profile）下包含多个选项（存储为profile.options: Option[]）。需求是：保存选项时，先确保活跃配置的选项数据正确，再保存该活跃配置。

当前实现代码如下：

const { updateProfileList, getProfile } = useProfiles();
const [ activeProfileId, setActiveProfileId ] = useState<string>('dev');
const [ activeOptionId, setActiveOptionId ] = useState<string>("1");

const [ activeProfile, setActiveProfile ] = useImmer(getProfile(activeProfileId));
const [ activeOption, setActiveOption ] = useImmer(getOption(activeOptionId, activeProfileId));

const saveActiveProfile = (id: string = activeProfileId) => {
    updateProfileList((draft) => { 
        const target = draft[draft.findIndex((x)=>x.id === id)] = activeProfile;
        target.id = id; // 配置ID不能修改！！！
    });
}

const saveActiveOption = (id: string = activeOptionId) => {
    setActiveProfile((draft) => { 
        const target = draft.options[draft.options.findIndex((x)=>x.id === id)] = activeOption;
        target.id = id; // 选项ID不能修改！！！
    });
    // saveActiveProfile(); 直接调用会拿到旧的activeProfile值
}

由于React状态更新的异步特性，直接调用saveActiveProfile()时，它引用的activeProfile还是更新前的旧值，要等到当前渲染周期结束才会更新。除了用Immer的current(draft)保存中间状态再传入保存函数外，有没有更优的实现方式？

补充的替代实现代码：

const saveProfile = (id: string, profile: Profile) => {
    updateProfileList((draft) => { 
        const target = draft[draft.findIndex((x)=>x.id === id)] = profile;
        target.id = id; // 配置ID不能修改！！！
    });
}

const saveActiveProfile = (id: string = activeProfileId) => {
    saveProfile(id, activeProfile);
}

const saveActiveOption = (id: string = activeOptionId) => {
    let intermediateActiveProfile = activeProfile;
    updateActiveProfile((draft) => { 
        const target = draft.options[draft.options.findIndex((x)=>x.id === id)] = activeOption;
        target.id = id; // 选项ID不能修改！！！
        intermediateActiveProfile = current(draft);
    });
    saveProfile(activeProfileId, intermediateActiveProfile);
}

优化方案 #

方案1：一步完成选项更新与配置列表同步 #

既然最终要将更新后的活跃配置同步到列表，无需先更新组件内的activeProfile再单独保存，直接在saveActiveOption中完成两个操作：

const saveActiveOption = (id: string = activeOptionId) => {
    // 先更新配置列表的数据源
    updateProfileList((draft) => {
        const profileIndex = draft.findIndex(x => x.id === activeProfileId);
        if (profileIndex === -1) return;
        
        const targetProfile = draft[profileIndex];
        const optionIndex = targetProfile.options.findIndex(x => x.id === id);
        if (optionIndex === -1) return;
        
        // 用activeOption更新选项，但保留原ID
        targetProfile.options[optionIndex] = { ...activeOption, id };
    });

    // 同步更新组件内的activeProfile状态（保持本地状态与数据源一致）
    setActiveProfile((draft) => {
        const optionIndex = draft.options.findIndex(x => x.id === id);
        if (optionIndex === -1) return;
        draft.options[optionIndex] = { ...activeOption, id };
    });
}

这种方式避免了异步状态更新导致的不一致，确保配置列表始终是最新的。

方案2：利用useEffect监听状态变化自动保存 #

如果希望保持setActiveProfile和保存操作的分离，可以用useEffect监听activeProfile的变化，状态更新完成后自动触发保存：

// 监听activeProfile变化，自动保存到配置列表
useEffect(() => {
    saveActiveProfile(activeProfileId);
}, [activeProfile, activeProfileId]);

const saveActiveOption = (id: string = activeOptionId) => {
    setActiveProfile((draft) => { 
        const optionIndex = draft.options.findIndex(x => x.id === id);
        if (optionIndex === -1) return;
        draft.options[optionIndex] = { ...activeOption, id };
    });
}

这完全适配React的异步状态更新特性，确保只有当activeProfile真正更新后才执行保存。

方案3：统一状态管理，消除重复状态 #

如果useProfiles是自定义Hook，建议将activeProfile的状态也托管到该Hook内部，避免组件内维护重复状态，直接在Hook层面处理选项更新与配置保存的联动：

// 在useProfiles自定义Hook中添加方法
const updateActiveOption = (optionId: string, updatedOption: Option) => {
    updateProfileList((draft) => {
        const profileIndex = draft.findIndex(x => x.id === activeProfileId);
        if (profileIndex === -1) return;
        
        const targetProfile = draft[profileIndex];
        const optionIndex = targetProfile.options.findIndex(x => x.id === optionId);
        if (optionIndex === -1) return;
        
        targetProfile.options[optionIndex] = { ...updatedOption, id: optionId };
    });
};

// 组件中直接调用该方法即可
const { updateActiveOption } = useProfiles();

const saveActiveOption = (id: string = activeOptionId) => {
    updateActiveOption(id, activeOption);
}

这种方式从根源上避免了状态同步问题，所有状态变更都在数据源层面统一处理，逻辑更清晰。

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