react-input-mask 的InputMask 不能与react-hook-form 的setValue 一起使用

Question

我正在尝试使用 useEffect 从 api 中提取信息，并使用 setValue 使用这些信息设置输入的值。我也在使用react-hook-form

useEffect(() => {
const getData = async () => {
  const response = await api.get(`/clientes/${id}`)

  if (response.status === 200) {
    setValue('name', response.data.name)
    setValue('email', response.data.email)
    console.log(response.data.phone) // (51) 99999-9999
    setValue('phone', response.data.phone)
  }
}

getData()
}, [id, setValue])

但是当组件生成时，'phone' 的值仍然为空。我正在使用react-input-mask的InputMask，这是我的输入：

<label>
  Telefone
  <InputMask
    mask="(99) 99999-9999"
    maskChar="_"
    type="text"
    id="celular"
    {...register('celular')}
  />
  {errors.celular && (
    <EditClientFormError>
      {errors.celular.message}
    </EditClientFormError>
  )}
</label>

我尝试将数据格式化回数字，但也不起作用

useEffect(() => {
    const getData = async () => {
      const response = await api.get(`/clientes/${id}`)
    
      if (response.status === 200) {
        setValue('name', response.data.name)
        setValue('email', response.data.email)
    
        const numberWithoutMask = response.data.phone.replace(/\D/g, '')
        const number = parseInt(numberWithoutMask, 10)
        console.log(number) // 51999999999
    
        setValue('phone', number)
      }
    }
    
    getData()
  }, [id, setValue])

我认为问题出在 InputMask 上，但这是我所知道的屏蔽输入的唯一有效方法。有人知道我该如何解决这个问题吗？

Answer 1

在 React 中，状态更新会批量进行，以在 React 事件处理程序期间优化性能。异步操作中不会发生自动批处理。异步函数中的多个连续 setValue 调用会触发多次重新渲染，这可能会导致问题。

而是像这样使用它

useEffect(() => {
  const getData = async () => {
    try {
      const response = await api.get(`/clientes/${id}`);
      if (response.status === 200) {
        setValue({
          name: response.data.name,
          email: response.data.email,
          phone: response.data.phone
        });
      }
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  };

  getData();
}, [id, setValue]);