Tengo un problema extraño con react native 0.62, en onChangeText, trato de llamar a 2 funciones setData y checkEmailSyntax. No sé por qué, pero solo se ejecuta la primera función. He visto preguntas similares, pero nada funciona.
Además, tengo este mismo problema con el contexto. El contexto devuelve funciones como cerrar sesión, establecer usuario, etc., cuando trato de ejecutar estas funciones una tras otra en useEffect, solo se llama a la última función.
¿Crees que este es un problema de la versión nativa de reacción? o es mi culpa.
Ok, @Nestoro resolvió este error, el checkEmail se está adaptando al estado antiguo sin un nuevo correo electrónico, por lo que el estado del correo electrónico está vacío. La nueva pregunta es ¿puedo mutar un estado incorrecto de Sintaxis de correo electrónico? o tengo que usar un useEffect y activarlo cada vez que cambia el correo electrónico?
<TextInput style={styles.inputText} placeholder="e-mail" autoCompleteType="email" onChangeText={text => { setData({ ...data, input_email: text }); checkEmailSyntax(text); }} autoCapitalize="none" placeholderTextColor="grey" /> const checkEmailSyntax = (inputVal) => { if (inputVal.includes('@') && inputVal.includes('.')) { setData({ ...data, wrongEmailSyntax: false }); } else { setData({ ...data, wrongEmailSyntax: true }); } }; const [data, setData] = useState({ input_email: '', input_password: '', wrongEmailSyntax: false, });En reaccionar, el estado de actualización es asíncrono. Si tratamos de actualizar consecutivamente el estado de dos claves diferentes del mismo objeto haciendo referencia al estado aparentemente previamente actualizado de la siguiente manera, terminaremos con una actualización incompleta.
const [inputs, setInputs] = useState({ firstName: "", lastName: "" }) const handleClick = () => { setInputs({ ...inputs, firstName: "John" }) setInputs({ ...inputs, lastName: "Wayne" }) } >> console.log(inputs) >> { firstName: "", lastName: "Wayne" }La solución es pasar una función que mantendrá el estado anterior presente antes de la actualización por lotes:
setData(prevState => ({ ...prevState, input_email: text })); ... setData(prevState => ({ ...prevState, wrongEmailSyntax: false }));en OnChangeText llame solo a la función checkEmailSyntax . Y dentro del if en checkEmailSyntax haz esto
setData({...data, wrongEmailSyntax: false, input_email: inputVal})
¡Como AG describe el estado es asíncrono!
el nuevo codigo
<TextInput style={styles.inputText} placeholder="e-mail" autoCompleteType="email" onChangeText={text => { checkEmailSyntax(text); }} autoCapitalize="none" placeholderTextColor="grey" /> const checkEmailSyntax = (inputVal) => { if (inputVal.includes('@') && inputVal.includes('.')) { setData({ ...data, wrongEmailSyntax: false, input_email: inputVal}); } else { setData({ ...data, wrongEmailSyntax: true, input_email: inputVal }); } };