React Native点击按钮需两次才触发表单校验生效如何解决？

问题原因 #

• React 中 useState 是异步更新的，调用setinputError后状态不会立刻生效，同一调用栈内读取inputError拿到的还是更新前的旧值：第一次点击时传给父组件的是初始空字符串，第二次点击时才能拿到上一次校验后更新的错误值，因此需要点击两次才会生效。
• LoginButton 内部的inputError状态属于冗余状态，没有存储必要，额外增加了状态同步负担。

修复方案 #

直接删除LoginButton内部的inputError状态，校验完成后直接把结果传给父组件即可，修改后的LoginButton代码如下：

const LoginButton = (props) => {
    const validateData = () => {
        if(!props.data.email && !props.data.password){
            return 'ep'
        } else if(!props.data.email){
            return 'e'
        } else if(!props.data.password){
            return 'p'
        } else {
            return ''
        }
    }

    return (
        <TouchableOpacity 
            style={styles.mainButton} 
            onPress={() => {
                const error = validateData()
                props.setValue(error)
            }}
        >
            <Text style={styles.mainButtonText}>Iniciar sesión</Text>
        </TouchableOpacity>
    )
}

可选优化 #

可以给Input组件增加输入时清空错误的逻辑，用户修改输入内容时自动去掉错误边框，提升交互体验：
修改父组件传入Input的setInputValue逻辑：

<Input
    placeholder={"Correo :"}
    setInputValue={value => {
        setemail(value)
        // 输入邮箱时清空邮箱相关错误
        seterror(prev => prev.replace('e', ''))
    }}
    color={error.includes("e") ? '#FA8072' : 'white'}
/>
<Input
    placeholder={"Contraseña :"}
    setInputValue={value => {
        setpassword(value)
        // 输入密码时清空密码相关错误
        seterror(prev => prev.replace('p', ''))
    }}
    color={error.includes("p") ? '#FA8072' : 'white'}
/>

内容的提问来源于stack exchange，提问作者González López David