我以前從未真正注意到這一點；不確定我的代碼中是否存在錯誤，或者 onChange 是否總是以這種方式運行，但我遇到了輸入延遲并且不知道如何解決它。這是我的意思的一個例子：
如您所見，控制臺僅列印先前的狀態，這很麻煩，因為這意味著要讓用戶登錄，即使用戶名和密碼已經正確輸入。
我的代碼相當簡單：
const [state, setState] = useState<LoginStateType>(iLoginState)
const {username, password} = state
const handleChange = (event: ChangeEventType) => {
const {name, value} = event.target
setState({...state, [name]: value})
console.log(username)
}
{...}
<input type="text" name="username" value={username} onChange={handleChange}/>
<input type="text" name="password" value={password} onChange={handleChange}/>
任何幫助表示贊賞，謝謝！
uj5u.com熱心網友回復：
由于狀態更新可能是異步的。
使用鉤子，這可以通過
const [state, setState] = useState(/* ... */)
setState(/* ... */)
useEffect(() => {
// state is guaranteed to be what you want
}, [state])
uj5u.com熱心網友回復：
setState 是異步步驟，不會立即獲得新值！
uj5u.com熱心網友回復：
我最終做的可能有點麻煩，但它完成了作業。除了狀態（這是我設定的 useContext 所必需的）之外，我還設定了兩個 useRef 常量：
const inputUserName = useRef<HTMLInputElement | null>(null)
const inputPassword = useRef<HTMLInputElement | null>(null)
{...}
<input type="text" name="username" ref={inputUserName} value={username} onChange={handleChange}/>
<input type={inputType as string} ref={inputPassword} name="password" value={password} onChange={handleChange}/>
所以我擁有的完整代碼如下：
//-------------ADMIN STATE-------------
const [state, setState] = useState<LoginStateType>(iLoginState)
const {username, password} = state
//-------------USE EFFECT-------------
//UseEffect: this is called when the context is set, I think
useEffect(() => {
//dispatch must be called before submit, I think because its an asynchronous call
dispatch(getAdminsRedux());
setContext(localStorage.getItem('user'))
if (context !== null){
navigate("/admin", {replace: true})
}
}, [setContext, context, dispatch, navigate]);
//-------------HANDLE CHANGE-------------
const handleChange = (event: ChangeEventType) => {
const {name, value} = event.target
setState({...state, [name]: value})
}
//-------------HANDLE LOGIN-------------
const handleLogin = async (event: MouseEvent) => {
event.preventDefault()
admins.forEach(async (admin) => {
if(admin.username === inputUserName.current!.value){
const comparedHash = compareHash(inputPassword.current!.value, admin.password)
if (comparedHash){
setContext(state.username)
localStorage.setItem('user', state.username)
}
}
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/482439.html