UseForm 에 반응은"하나 클릭한 뒤"[중복]

0

질문

내가 사용하여 useForm 훅에 반응하고,몇 가지 이유 때 내가 입력 값으로 양식을 클릭하 제출 버튼,상하지 않고 값을 나는 제출된 그러나 값이 비어 있습니다.

그 때 나는 두 번째로 입력 설정 값의 형태로 제출하여,국가는 값의 첫 번째 제출.

그것은 보인다 그것은 항상"하나의 클릭한 뒤"(참조합니다.로그에서 registerAccount 능)

내가 연결 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```
1

최고의 응답

0

문제입니다.로그(). 당신은 당신이 쓰는 콘솔에 로그인 전에 당신은 상태이 업데이트됩니다. 이후 useState 수행하이 비동기적으로 수행됩니다.

를 보시려면의 항목,다음을 사용할 필요가 useEffect 으로 다음과 같습니다.

   useEffect(() => {
        console.log(items)
    }, [items]);
2021-11-24 05:29:23

좋은,많은 감사!
Robtc83

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................