React Hook Form中errors对象为何会临时变为空对象？

Let me break down why you're seeing this behavior and how to fix it:

The Root Cause #

The issue comes down to two key parts of your code combined with React Hook Form's default behavior:

1. setValue clears errors by default
   When you call setValue("name", value) in onNameChange, React Hook Form automatically clears any existing errors for the name field (this is the default behavior, controlled by the shouldClearErrors option which defaults to true). This immediately empties errors.name as soon as you type a new character.

2. Triggered validation passes initially
   Right after setValue, you run await trigger("name"). Since your only validation rule is required: true, as long as the new input isn't empty, this validation will pass (return true). React Hook Form won't re-add any errors to the errors object at this point.

3. Debounced API call introduces a delay
   Your getPokemonDebounced function has a 500ms delay. During this gap, the API call hasn't failed yet, so you haven't run setError to re-add the custom error. This creates the window where errors is temporarily empty.

Once the debounce delay ends and the API call fails, setError runs and repopulates errors.name with your custom message.

How to Fix It #

You have a couple of options depending on your desired behavior:

Option 1: Prevent setValue from clearing errors

Modify your setValue call to disable the default error-clearing behavior by adding the shouldClearErrors: false option:

setValue("name", value, { shouldClearErrors: false });

This way, the existing error stays in place until your API call either succeeds (clearing it) or fails (retaining/updating it).

Option 2: Use React Hook Form's built-in async validation

Instead of manually handling the API call and setError, let RHF handle the async validation directly in the register rules. This eliminates the need for custom onChange logic and debouncing (you can still add debouncing inside the validate function if needed):

<input 
  {...register("name", {
    required: "Name is required",
    validate: async (value) => {
      // Add debounce here if needed
      try {
        await axios.get(`https://pokeapi.co/api/v2/pokemon/${value}`);
        return true;
      } catch (error) {
        return "CUSTOM name error";
      }
    }
  })} 
  name="name" 
  placeholder="Enter a pokemon" 
/>

RHF will automatically manage the error state throughout the validation process, so you won't see the temporary empty errors object.

Walkthrough of Your Scenario #

To recap the flow you're seeing:

1. You type wefhiwd → API fails → setError adds errors.name.
2. You type another character → setValue clears errors.name → trigger("name") passes (since input isn't empty) → errors is empty.
3. 500ms later → API fails again → setError re-adds errors.name.

内容的提问来源于stack exchange，提问作者user8758206