Странная ошибка с Редуктором - PullRequest
0 голосов
/ 11 ноября 2019

Я поддерживаю массив объектов в моем контексте, который отслеживает ошибки проверки в моей форме ввода. Вот пример этого, заполненного одним объектом:

validationErrors = [{id: 0, message: 'Already exists', name: 'vin'}]

Сообщение отображается под соответствующим элементом ввода, предлагая пользователю ввести новое значение.

Когда пользователь делает этовыполняется асинхронный вызов, чтобы проверить, существует ли новое значение в БД. Перед тем, как сделать этот вызов, вызов отправляется на этот редуктор:

    case CLEAR_VIN_INFO: {
      return {
        ...state,
        validationErrors: [...state.validationErrors.filter(
          validationError => validationError.name !== 'vin' || validationError.id !== action.id)],
        vehicles: state.vehicles.map((vehicle: Vehicle) => {
          if (vehicle.id === action.id) {
            return {
              ...vehicle,
              makeModelYear: ''
            };
          } else {
            return vehicle;
          }
        })
      };
    }

Он делает несколько вещей, но главное, на чем я хочу сосредоточиться, - это конкретная ошибка проверки, с id: 0 и name: vin удалены из validationErrors. Наблюдая за тем, что происходит в Chrome DevTools, я действительно могу подтвердить, что он удаляется. Другими словами, validationErrors установлен в пустой массив.

Но после возврата из асинхронного вызова следующий код дает неожиданные результаты: console.log(validationErrors.find(error => error && error.name === 'vin' && error.id === vehicle.id)); Он показывает следующее: {id: 0, message: 'Already exists', name: 'vin'} Как это возможно?

Кстати, проверка validationErrors в Chrome DevTools снова показывает, что он все еще пуст!

Моя интуиция говорит мне, что эта ошибка связана с предыдущей версией validationErrorsвместо ссылки. Я никогда раньше не сталкивался с этим, поэтому не уверен, что делать.

Есть идеи?

Обновление: В качестве проверки работоспособности я вместо этого сделал вызов этому редуктору:

case CLEAR_ERRORS: {
  return {
    ...state,
    validationErrors: []
  };
}

Этот код полностью очищает validationErrors перед выполнением асинхронного вызова. Тем не менее, по возвращении из асинхронного вызова, validationErrors все еще заполнен! Теперь я полностью сбит с толку.

1 Ответ

0 голосов
/ 11 ноября 2019

Попробуйте получить состояние и получить доступ к validationErrors внутри вашего асинхронного вызова, тогда это должно быть хорошо ... но вам нужно больше объяснений в вашем вопросе.

...