反应的on change输入延迟

Question

我以前从未真正注意到过。不确定我的代码中是否有错误，或者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}/>

任何帮助都将不胜感激，谢谢！

Answer 1

因为状态更新可能是异步的 。

---

使用钩子，这可以通过

const [state, setState] = useState(/* ... */)

setState(/* ... */)

useEffect(() => {
  // state is guaranteed to be what you want
}, [state])

Answer 2

SetState是一个异步步骤，不要立即获得新值！

Answer 3

我最终做的可能有点麻烦，但完成了工作。除了国家（我已经设置的用户室内文本所必需的）之外，我还设置了两个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)
        }
      }
    });
  }