为啥要按两下才能做我想做的事？反应原生

Posted 2023-03-16

【中文标题】为啥要按两下才能做我想做的事？反应原生

【英文标题】：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>
    )

【参考方案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>
    )