React Hooks 实现密码匹配校验时 onChange 事件触发异常问题求助

• React的状态更新是批量异步执行的，你在handleChange中调用setPassword/setPassword2后，当前函数作用域内的password和password2还是更新前的旧值，所以直接调用checkPass拿到的永远是上一轮的状态，才会出现「需要再触发一次事件才校验」的问题，加setTimeout也没用，因为你闭包捕获的还是旧的状态值。
• 同时绑定onChange和onKeyUp属于重复触发事件，完全不是最佳实践，反而会导致逻辑执行多次，浪费性能还可能出现意料之外的问题。

有两种常用的实现方式，可按需选择：

方式1：直接用最新的输入值做校验，不依赖state #

你在handleChange里已经拿到了最新的输入值，完全可以把两个密码的最新值传给校验函数，不需要等state更新：

const [password, setPassword] = useState('')
const [password2, setPassword2] = useState('')
const [passError, setPerror] = useState(false)

const handleChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    console.log(name +"  "+ value);
    
    let newPass = password, newPass2 = password2;
    if(name == 'username') setUsername(value);
    if(name == 'email') setEmail(value);
    if(name == 'pass') {
        setPassword(value);
        newPass = value;
    }
    if(name == 'pass2') {
        setPassword2(value);
        newPass2 = value;
    }
    // 直接用最新值校验，不需要等state更新
    checkPass(newPass, newPass2);
}

// 改造校验函数，接收参数而不是直接读state
const checkPass = (pass1, pass2) => {
    const isError = pass1 !== pass2;
    setPerror(isError);
    console.log(isError)
}

模板代码删掉多余的onKeyUp={handleChange}即可，仅保留onChange就能正常触发校验。

方式2：用useEffect监听密码状态变化，自动触发校验 #

如果你的校验逻辑更复杂，或者多个地方会修改密码状态，可以用useEffect监听两个密码的变化，只要任意一个值变更就自动触发校验：

const [password, setPassword] = useState('')
const [password2, setPassword2] = useState('')
const [passError, setPerror] = useState(false)

// 新增useEffect监听两个密码的变化
useEffect(() => {
    setPerror(password !== password2);
}, [password, password2]) // 依赖项为两个密码状态，只要有一个变化就执行回调

const handleChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    console.log(name +"  "+ value);
    
    if(name == 'username') setUsername(value);
    if(name == 'email') setEmail(value);
    if(name == 'pass') setPassword(value);
    if(name == 'pass2') setPassword2(value);
    // 不需要再手动调用校验函数
}

这种方式更符合React的声明式编程逻辑，代码更简洁也不容易出错，是这类表单校验场景的公认最佳实践。

内容的提问来源于stack exchange，提问作者xxxhomie21