React中的useForm是“一键式”[重复]答案

【问题标题】：useForm in React is "one click behind" [duplicate]React中的useForm是“一键式”[重复]
【发布时间】：2021-11-24 04:51:24
【问题描述】：

我在react中使用了useForm钩子，由于某种原因，当我在表单中输入值并单击提交按钮时，状态不会采用我提交的值，而是采用空值。

然后，当我在表单中输入第二组值并提交时，状态将采用第一次提交的值。

它似乎总是“单击后面”（参见 registerAccount 函数中的 console.log）

我将内部的 handleSubmit 与 registerAccount 函数相关联，该函数应该在第一次点击时执行更新保持帐户的状态。

我错过了什么吗？

import {useForm} from 'react-hook-form'

const AddAccount = ()=> {

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

    const registerAccount = (data)=> {
          setItems([...items, data]) 
          console.log(items)
    }

return(

<div>    

    <div className="grid grid-cols-1 justify-items-center">
        <h1 className="text-black font-bold py-2 text-2xl" >Agrega una cuenta</h1>
        <form onSubmit={handleSubmit(registerAccount)}>
            <table className="table-fixed">
                <thead>
                    <th className="w-1/2 "></th>
                    <th className="w-1/2 "></th>
                </thead>
                <tbody>
                    <tr>
                        <td><label className="py-1">Alias de la cuenta: </label></td>
                        <td><input defaultValue="" name="accountAlias" placeholder="Alias" 
                        className= "my-3 border-solid border-2 border-gray-900 py-1 px-3" 
                        {...register("accountAlias", {required: "Introduce el nombre de la cuenta"})}/>
                        <p className="text-red-500 text-sm">{errors.accountAlias?.message}</p>
                            </td>
                            
                    </tr>
                    <tr>
                        <td><label className="py-1">Tipo de cuenta: </label></td>
                        
                        <td><select name="accountType" className= "my-3 border-solid border-2 border-gray-900 py-1 px-3"
                        {...register("accountType", {required: "Selecciona el tipo de cuenta"})}>
                            <option value="">Selecciona...</option>
                            <option value="cuenta de gastos">Cuenta de gastos</option>
                            <option value="ahorro">Ahorro</option>
                            <option value="tarjeta de crédito">Tarjeta de crédito</option>
                            <option value="inversión">Inversión</option>
                            </select>
                            <p className="text-red-500 text-sm">{errors.accountType?.message}</p>
                            </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </tbody>
            </table>

            <button className="bg-blue-500 text-white py-2 px-6 px-2 mt-4">Agregar</button>
        </form>
    </div>

</div>
)
}

export default AddAccount```

【问题讨论】：

标签： reactjs react-hooks react-hook-form use-form

【解决方案1】：

问题出在你的 console.log() 中。您在状态更新之前正在写入控制台日志。因为 useState 是异步执行的。

如果你想查看你的物品状态，那么你需要使用 useEffect 如下。

   useEffect(() => {
        console.log(items)
    }, [items]);

【讨论】：

太好了，非常感谢！