I have a weird problem with react native 0.62, in onChangeText, I try to call 2 functions setData and checkEmailSyntax. I don't know why but only the first function executes. I have seen similar questions, but nothing works.
Also, I have this same problem with context. Context returns function like logout, setUser, and so on when I try to execute these functions one after another in useEffect only the last function is called.
Do you think this is a react native version problem? or it is my fault.
Ok, @Nestoro solved this mistary, the checkEmail is coping old state without a new email so the email state is empty. New question is can I mutate a wrongEmailSyntax state? or I have to use a useEffect and fire it every time when email changes?
<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,
});In react updating state is asynchronous. If we try to consecutively update the state of two different keys of the same object by referencing the seemingly previously updated state in the following way, we will end up with an incomplete update.
const [inputs, setInputs] = useState({
firstName: "",
lastName: ""
})
const handleClick = () => {
setInputs({ ...inputs, firstName: "John" })
setInputs({ ...inputs, lastName: "Wayne" })
}
>> console.log(inputs)
>> { firstName: "", lastName: "Wayne" }
Solution is to pass a function which will hold the previous state present before the batched update -
setData(prevState => ({ ...prevState, input_email: text }));
...
setData(prevState => ({ ...prevState, wrongEmailSyntax: false }));
in OnChangeText call only the checkEmailSyntax function. And inside the if in checkEmailSyntax do this
setData({...data, wrongEmailSyntax: false, input_email: inputVal})
As A G describe state is async!
The new code
<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 });
}
};