Как исправить проблему не повторного рендеринга после обновления состояния с помощью универсальной функции - PullRequest
Новая
       26

Как исправить проблему не повторного рендеринга после обновления состояния с помощью универсальной функции

0 голосов
/ 28 марта 2019

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

Используя инструменты разработчика Chrome, когда я проверил новый объект состояния, он обновил значение, но моя функция рендеринга реагирующего компонента больше не вызывается

Ниже приведен фрагмент кода, написанный в моем reducer для обновления функции: 

function App(state = initialState, action) {
  switch (action.type) {
    case ON_CHANGE:
      let newState = Utilities.updateProperty(
        state,
        action.change.key,
        action.change.value
      );
      return newState;
    case DIFFERENT_ACTION:
      // TODO implementation
      return state;
    default:
      return initialState;
  }
}

И следующий код, написанный в Utilities.updateProperty функции: 

updateProperty(object, key, value) {
    let keys = key.split(".");
    let obj = object;
    for (var i = 0; i < keys.length - 1; i++) {
      obj = obj[keys[i]];
    }
    obj[keys[keys.length - 1]] = value;
    return object;
}

Когда я добавил точку останова в строку, где написано return newState;, я вижу, что значение здесь идеально обновляется. Поэтому я ожидал, что мой компонент будет перерисован с новым значением.

Если я изменю свой return newState, как показано ниже, он работает правильно: 

return {
  ...newState,
  ...{
    now: new Date()
  }
};

Ответы [ 2 ]

1 голос
/ 28 марта 2019

Я бы пошел с чем-то вроде этого, чтобы охватить все базы (не проверено). 

import produce from "immer";
import set from "lodash.set";

updateProperty(object, key, value) {
  return produce(object, draft => set(draft, key, value))
}
0 голосов
/ 28 марта 2019

Вы должны сначала распространить свое состояние, чтобы оно стало новым объектом 

updateProperty(object, key, value) {
    let keys = key.split(".");
    let obj = { ...object }; // let obj = object;
    for (var i = 0; i < keys.length - 1; i++) {
      obj = obj[keys[i]];
    }
    obj[keys[keys.length - 1]] = value;
    return obj; // return object;
}
...