React使用useForm钩子提交表单时出现点击滞后一步的问题

问题根因 #

这个现象和react-hook-form的配置没有关系，是React自带的状态更新机制导致的：React的setState（包括useState返回的更新函数）是异步批量执行的，调用setItems后不会立刻修改当前作用域下的items变量，而是会把更新请求加入队列，等当前同步代码全部执行完后才会触发组件重渲染，重渲染后才能拿到最新的items值。

你在registerAccount里调用setItems后立刻打印items，拿到的永远是本次更新前的旧值，所以第一次提交时打印的还是初始的空数组，第二次提交时打印的是第一次更新后的值，看起来就比提交操作滞后了一步。

解决方案 #

• 如果只是要验证本次提交的表单数据是否正确，直接打印registerAccount接收的data参数即可，这个参数是react-hook-form返回的本次提交的实时数据：

const registerAccount = (data)=> {
  setItems([...items, data]) 
  console.log(data) // 直接打印本次提交的内容
}

• 如果你需要在items更新完成后执行后续逻辑，可以用useEffect监听items的变化：

import {useEffect, useState} from 'react'
import {useForm} from 'react-hook-form'

const AddAccount = ()=> {
  const {register, handleSubmit, formState: { errors }} = useForm()
  const [items, setItems] = useState([])

  // items更新后会触发该回调，拿到的是最新值
  useEffect(() => {
    console.log(items)
  }, [items])

  const registerAccount = (data)=> {
    // 推荐用函数式更新写法，避免依赖旧状态出现异常
    setItems(prev => [...prev, data]) 
  }
  // 其余代码保持不变
}

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