React / Redux: componentDidUpdate не запускается последовательно - PullRequest
Новая
       9

React / Redux: componentDidUpdate не запускается последовательно

0 голосов
/ 24 октября 2018

У меня есть вложенные массивы в моих реквизитах, и пользователь может переупорядочить массив второго уровня, перетаскивая столбец.Я (используя redux) делаю поверхностную копию внешнего массива getState, делаю переупорядочение (через переназначение объектов массива на основе индекса) и возвращаю новый массив в состояние (используя оператор расширения в моем редукторе).Однако componentDidUpdate не называется , если это упорядочивание является первым, что я делаю после загрузки страницы .Если я предпринимаю другие действия, которые обновляют реквизит / состояние, , а затем пытается изменить порядок, порядок работает нормально, и вызывается componentDidUpdate.

В прежней ситуации, когда порядокэто первое, что я пытаюсь сделать после загрузки / обновления страницы, срабатывает функция рендеринга (с правильно переупорядоченными реквизитами), но DOM никогда не обновляется, предположительно потому, что redux не распознает изменение состояния?

Похоже, что некоторые другие изменения реквизита (даже если они не связаны с массивами) «просыпаются», используя избыточность или connect, и позволяют распознавать изменения.

Здесь я копирую, отправляю и затем освобождаю обновленное состояние вредуктор:

в методе actionCreator: 

...
const newProjects = getState().tracker.projects.slice().map(p => {
    if (p.innerArray) {
        const from = p.innerArray[draggedId-1];
        const to = p.innerArray[droppedId-1];
        p.innerArray[draggedId - 1] = { ...to, order: draggedId };
        p.innerArray[droppedId - 1] = { ...from, order: droppedId };
    }
    return p;
})                
dispatch({ type: 'RECEIVE_FIELD_UPDATE', projects: newProjects, message: "Sorted" });

редуктор: 

case 'RECEIVE_FIELD_UPDATE':
        return {
            ...state,
            projects: action.projects,
            message: action.message
        }

Как видите, я не изменяю состояние в редукторе и не занимаюсь другимивещи против паттернов (насколько я знаю).

FWIW, значение "Sorted" в свойстве сообщения, кажется, проходит независимо от того, нажата ли componentDidUpdate (у меня есть модал, который появляетсяс сообщением для подтверждения).

Любые указатели или сопутствующая документация будут полезны;Я читаю все, что могу найти, в том числе другие сообщения StackOverflow, но безрезультатно.

ОБНОВЛЕНИЕ Решил проблему, это было связано с приращением, не выводящим свойствано не из-за того, что я ожидал, читайте ниже, если интересно.

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Понял это, и, как обычно, я искал не в том месте.

Проблема заключалась в том, что моя условная проверка загрузки страницы, чтобы предотвратить повторную загрузку уже сохраненных данных, препятствовала запуску любых отправок.Когда я посмотрел в редуктор, под-массивы проектов были идентичны после перетаскивания, потому что состояние еще не было подключено ранее.Я думал, что жесткое обновление приведет к полной перезагрузке, но, видимо, мне нужно больше узнать о том, как избыточный хранит данные и как их обновлять.

В любом случае, исправляя это условие, чтобы я получал новые данные при загрузке страницыисправлена ​​ошибка, и теперь componentDidUpdate последовательно вызывается.

0 голосов
/ 24 октября 2018

При обновлении состояния в редукторе в формате массива мне пришлось снова распространять состояние, чтобы обновления происходили и не мутировали. 

case 'RECEIVE_FIELD_UPDATE':
        return {
            ...state,
            projects: ...state, ...action.projects,
            message: action.message
        }

или ... 

case 'RECEIVE_FIELD_UPDATE':
         return {
             ...state,
             projects: [...state, ...action.projects],
             message: action.message
            }

В зависимости от формата.Надеюсь, это поможет.

...