Reactjs 获得；不变冲突：超过最大更新深度；ImmerJS错误

我有一个React组件，它是一个使用Redux+ImmerJS实现的动态向导。它根据JSON模式一次呈现一个组（表单）列表，供用户一次填写一个。每个组都有一个可以用作标识符的唯一组码。当用户浏览向导时，我需要跟踪每个组的已完成/未完成状态

问题在于减少下面的SET\u ACTIVE\u GROUP\u有效操作的实现。在运行时，填写表单时会导致此运行时错误

未捕获不变冲突：超过最大更新深度。这个可以 当组件在内部重复调用setState时发生 componentWillUpdate或componentDidUpdate。React限制了 嵌套更新以防止无限循环

我已经缩小了范围，非常确定是这个动作导致了问题，因为如果我把它注释掉，错误就会消失。我已经咨询了在的文件，我希望我所做的应该工作。我在哪里失踪

// reducer.js
export const initialState = {
    loading: false,
    schema: {},
    groupsValidity: {},
};

const reducer = (state = initialState, action) =>
    produce(state, draft => {
        switch (action.type) {
            case types.GET_SCHEMA_LOADING:
                draft.loading = true;
                break;
            case types.GET_SCHEMA_SUCCESS:
                draft.loading = false;
                draft.data = action.data;
                break;
            // ..... more actions
            case types.SET_ACTIVE_GROUP_VALID:
                // => this implementation throws run-time ERROR !!!
                draft.groupsValidity[action.groupCode] = { 
                    isCompleted: action.value,
                };                 
                break;
        }
    });

---

感谢您的帮助/解释

我找到了一个可行的替代方法：使用lodash合并

import { merge } from 'lodash';

.....

    case types.SET_ACTIVE_GROUP_VALID:
                merge(draft.groupsValidity, {
                    [action.groupCode]: {
                        isCompleted: action.value,
                    },
                });  // this works. no run-time error and produce correct state. 

不过，还是很想知道为什么vanila JS实现不起作用