Метод OnChange не обновляет состояние - PullRequest
Новая
       7

Метод OnChange не обновляет состояние

0 голосов
/ 19 июня 2020

У меня есть метод onChange, который не обновляет мое состояние redux. Если я console.log внутри onChange, он выглядит правильно, но за пределами onChange ничего не произошло, и я не понимаю, почему. Я пытаюсь очистить ошибки, если они есть, но в моем магазине redux ничего не происходит.

Вот какой-то код: 

  const onChange = (e) => {
    let errors = reportIncidentState.errors || {};
    const { attr } = e.target.dataset;
    const updates = { [attr]: e.target.value };
    const clearErrors = (keys = []) => {
      errors = Object.keys(errors)
        .reduce((prev, curr) => ((typeof keys === 'string' && keys === curr)
          || keys.indexOf(curr) > -1
          ? prev : { ...prev, [curr]: errors[curr] }),
        {});
    };

    clearErrors(attr);
    switch (attr) {
      case 'partialSick':
        updates[attr] = true;
        updates.fullsick = false;
        clearErrors(['partialSick', 'fullsick']);
        break;
      case 'fullsick':
        updates[attr] = true;
        updates.partialSick = false;
        clearErrors(['partialSick', 'fullsick']);
        break;
      case 'unsureOfDate':
        updates[attr] = e.target.value;
        clearErrors(['dayofSickness', 'additionalInformation']);
        break;
      case 'hasQuit':
        updates[attr] = e.target.value;
        clearErrors(['quitDate']);
        break;
      default:
        break;
    }

    reportIncidentUiActions.updateErrors({ errors });
    reportIncidentUiActions.updateIncidentUpdate(updates);
  };

Редуктор: 

    case UPDATE_ERRORS:
      return {
        ...state,
        errors: {
          ...state.errors,
          ...action.payload.errors,
        },
        update: {
          ...state.update,
          ...action.payload.updates,
        },
      };

Действия: 

export const updateErrors = ({ errors: errs }) => (
  {
    type: UPDATE_ERRORS,
    payload: { errors: errs },
  }
);

Я ожидаю, что если кнопка не был нажат, но это необходимо, появится ошибка, и она появится. Затем я ожидаю, что ошибка исчезнет при нажатии кнопки, но это не go. И в моем магазине redux ошибка все еще есть ..

1 Ответ

0 голосов
/ 19 июня 2020

Я думаю, это просто потому, что здесь: 

return {
    ...state,
    errors: {
      ...state.errors,
      ...action.payload.errors,
    },

вы объединяете существующие ошибки с очищенными ошибками - у него нет возможности удалить элемент.

В зависимости от вашего варианта использования вы можете просто ввести: 

errors: action.payload.errors,

Или вы можете добавить что-то вроде: 

case REMOVE_ERRORS:
  const errors = { ...state.errors };
  action.payload.errors.forEach((error) => {
      delete errors[error];
  });
  return {
    ...state,
    errors
  };

, а затем активировать это при удалении ошибок.

...