Получение «Нарушение инварианта: превышена максимальная глубина обновления». ошибка с ImmerJS - PullRequest
Новая
       20

Получение «Нарушение инварианта: превышена максимальная глубина обновления». ошибка с ImmerJS

0 голосов
/ 13 января 2020

У меня есть компонент React, который представляет собой динамический мастер c, реализующий Redux + Immer JS. Он отображает список групп (форм) по одной на основе схемы JSON, которую пользователи могут заполнять по одной за раз. Каждая группа имеет уникальный groupCode , который можно использовать в качестве идентификатора. Когда пользователи go через мастера, мне нужно отслеживать завершенное / незавершенное состояние каждой группы.

Проблема с реализацией уменьшения действия SET_ACTIVE_GROUP_VALID ниже. Во время выполнения это вызывает ошибку run-time при заполнении формы.

Uncaught Invariant Violant: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Я сузил его и почти уверен, что именно это действие вызывает проблему, потому что, если я закомментировал его, ошибка исчезнет. Я консультировался с документами по телефону https://immerjs.github.io/immer/docs/return и ожидаю, что то, что я делаю, должно сработать. Куда я скучаю? 

// 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;
        }
    });

Любая помощь / объяснение приветствуется.

1 Ответ

0 голосов
/ 14 января 2020

Я нашел альтернативу, которая работает: используйте loda sh merge. 

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 не работает.

...