Я использую крючок useForm в react, и по какой-то причине, когда я ввожу значения в форму и нажимаю кнопку отправить, состояние не принимает значения, которые я отправил, а принимает значения пусто.
Затем, когда я ввожу второй набор значений в форму и отправляю его, государство принимает значения первого представления.
Кажется, что он всегда идет "на один клик позади" (см. консоль.войдите в систему с помощью функции RegisterAccount)
Я связал отправку внутри с функцией 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```