Strange bug with Reducer - reactjs

Question

I maintain an object array in my Context that keeps track of validation errors in my input form. Here's an example of it populated with one object:
validationErrors = [{id: 0, message: 'Already exists', name: 'vin'}]
The message is displayed underneath the input element in question, prompting the user to enter a new value.
When the user does so, an async call is made to check if the new value already exists in the DB. Before that call is made, a call is dispatched to this 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;
}
})
};
}
It's doing a few things but the main thing I want to focus on is that this specific validation error, with id: 0 and name: vin are removed from validationErrors. Watching what's happening in Chrome DevTools, I can indeed confirm that it is being removed. In other words, validationErrors is set to an empty array.
But upon returning from the async call, the following code produces unexpected results:
console.log(validationErrors.find(error => error && error.name === 'vin' && error.id === vehicle.id));
It reveals the following: {id: 0, message: 'Already exists', name: 'vin'}
How is this possible?
By the way, checking validationErrors in Chrome DevTools again shows that it's still empty!
My intuition is telling me that this bug is due to a previous version of validationErrors being referenced instead. I've never encountered this before though, so am not sure what to do.
Any ideas?
Update: As a sanity check of sorts, I made a call to this reducer instead:
case CLEAR_ERRORS: {
return {
...state,
validationErrors: []
};
}
This one absolutely clears validationErrors before the async call is made. Yet, upon returning from the async call, validationErrors is still populated! Now I'm completely baffled.

Answer 1

Try to fetch the state and access validationErrors inside your async call, then it should be good... but need more explanation in your question.