React native onChangeText execute only one function

user_19344427 0
Viewed 44

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,
  });

react-native react-hooks reactjs javascript
2 Answers

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 }));
user_2134690

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 });
    }
  };
user_79927480
Related