将setValue与useEffect结合使用可能会更容易：

const { register, handleSubmit, setValue } = useForm({ 
  defaultValues: { price: 0, quantity: 0, total: 0 } 
});

...

useEffect(() => {
  setValue('total', quantity * price)
}, [quantity, price])

...

  <input type="number"
    {...register("total")} // No need to watch        
    readOnly
  />

解决了，谢谢@Anurag Srivastava（抱歉我还不能投票），这是最终代码：

import { useEffect } from "react";
import { useForm } from "react-hook-form"

function App() {

  const { register, handleSubmit, setValue, watch } = useForm({
    defaultValues: {
      price: 0,
      quantity: 0,
      total: 0
    }
  });

  // I had to add these two lines
  const price = watch("price") 
  const quantity = watch("quantity")

  useEffect( ()=> {
    setValue('total', price * quantity)
  }, [price, quantity, setValue])

  const onSubmit = data => console.log(data)

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>

        <div>
          <label htmlFor="quantity">Quantity: </label>
          <input type="number" 
            {...register("quantity")}  
          />
        </div>

        <div>
          <label htmlFor="price">Price: </label>
          <input type="number"
            {...register("price")}
          />
        </div>
        
        {
          /** 'total' is the result of multiplying the two previous fields. 
          *   It only updates the form data when it get the focus.
          */
         }
        <div>
          <label htmlFor="total">Total: </label>
          <input type="number"
            {...register("total")}
            //value={watch('price') * watch('quantity')}
            readOnly
          />
        </div>

        <input type="submit" value='Submit' />
      </form>
    </div>
  )
}

export default App