为什么要按两下才能做我想做的事？反应原生答案

【问题标题】：Why it takes two presses to do what i want? React Native为什么要按两下才能做我想做的事？反应原生
【发布时间】：2021-12-21 15:42:27
【问题描述】：

我有一个输入，它将其值传递给其父级上的 useState。该值被传递给其他组件（自定义按钮）。在那里，输入数据得到验证并在另一个 useState 中返回父级，如果有错误并且 （“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>
    )
}

【问题讨论】：

标签： javascript react-native use-state react-functional-component touchableopacity

【解决方案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>
    )
}

【讨论】：