为什么需要按两次才能完成我想要的操作？反应本机

Question

我有一个输入，它将其值传递给其父级上的 useState。该值被传递给其他组件 （自定义按钮）。如果出现错误，输入数据将在另一个 useState 中得到验证并 returns 到父级，其中 ("e" = 电子邮件错误，"p" = 密码错误，"ep" =电子邮件和密码错误） 然后根据该响应设置输入的边框颜色，如果有错误则变为红色，否则变为白色。

但它只在我第二次按下按钮时起作用（一切都应该开始）

求助！

const LoginScreen = () => {
    const [email, setemail] = useState('');
    const [password, setpassword] = useState('');
    const [error, seterror] = useState('');

    return (
        <View style={styles.container}>

                    <Input
                        placeholder={"Correo :"}
                        setInputValue={value => setemail(value)}
                        color={
                            error.includes("e") ? '#FA8072' : 'white'
                        }
                    />
                    <Input
                        placeholder={"Contraseña :"}
                        setInputValue={value => setpassword(value)}
                        color={
                            error.includes("p") ? '#FA8072' : 'white'
                        }
                    />
                  
                    <LoginButton data={{email: email, password: password}} setValue={value => {seterror(value)}}/>

        </View>
    )
}

=========================================

输入组件

const Input = (props) => {
    return (
        <View style={styles.container}>
            <Text style={styles.placeholder}>{props.placeholder}</Text>
            <TextInput
                style={[styles.input, {borderColor: props.color}]}
                onChangeText={(value) => props.setInputValue(value)}
            />
        </View>
    )
}

=========================================

按钮组件

const LoginButton = (props) => {
    const [inputError, setinputError] = useState('')

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

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

Answer 1

因为您尝试更改状态两次。实际上，您不需要使用状态在 LoginButton 组件上传递值。尝试直接调用。

const LoginButton = (props) => {

    let validateData = () => {
        if(!props.data.email && !props.data.password){
            props.setValue("ep");
        }
        else if(!props.data.email){
            props.setValue('e');
        }
        else if(!props.data.password){
            props.setValue('p');
        }
        else {
            props.setValue('');
        }
    }

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

为什么需要按两次才能完成我想要的操作？反应本机

Why it takes two presses to do what i want? React Native

javascript

react-native

touchableopacity

react-functional-component

use-state