减速器的奇怪错误

Question

我在 Context 中维护了一个对象数组，用于跟踪输入表单中的验证错误。这是一个填充了一个对象的示例：

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

消息显示在相关输入元素下方，提示用户输入新值。

当用户这样做时，会进行异步调用以检查数据库中是否已存在新值。在调用之前，调用会被调度到这个 reducer：

    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'} 这怎么可能？

对了，在 Chrome DevTools 中再次查看validationErrors 显示它仍然是空的！

我的直觉告诉我，这个错误是由于之前版本的 validationErrors 被引用了。不过我以前从来没有遇到过，所以不知道该怎么办。

有什么想法吗？

更新：作为某种健全性检查，我改为调用此减速器：

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

在进行异步调用之前，这个绝对清除validationErrors。然而，从异步调用返回后，validationErrors 仍然被填充！现在我完全困惑了。

Answer 1

尝试在您的异步调用中获取状态并访问validationErrors，那么它应该很好......但需要在您的问题中进行更多解释。