React native onChangeText只执行一个函数

Question

我有一个奇怪的问题与react native 0.62，在onChangeText，我尝试调用2函数setData和checkEmailSyntax。我不知道为什么，但只执行了第一个函数。我见过类似的问题，但都不奏效。

同样，我对上下文也有同样的问题。当我尝试在useEffect中一个接一个地执行这些函数时，上下文返回logout, setUser等函数，只有最后一个函数被调用。

你认为这是react native版本的问题吗?或者是我的错。

Ok， @Nestoro解决了这个问题，checkEmail在没有新邮件的情况下复制旧邮件状态，所以邮件状态为空。新问题是，我可以改变错误的emailsyntax状态吗?或者我必须使用useEffect并在每次邮件更改时触发它?

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

Answer 1

In react的更新状态是异步的。如果我们试图连续更新同一对象的两个不同键的状态，通过引用看似先前更新的状态，以以下方式，我们将以不完整的更新告终。

const [inputs, setInputs] = useState({
firstName: "",
lastName: ""
})
const handleClick = () => {
setInputs({ ...inputs, firstName: "John" })
setInputs({ ...inputs, lastName: "Wayne" })
}
>> console.log(inputs)
>> { firstName: "", lastName: "Wayne" }

解决方法是传递一个函数它将保留批处理更新之前的状态-

setData(prevState => ({ ...prevState, input_email: text }));
...
setData(prevState => ({ ...prevState, wrongEmailSyntax: false }));

Answer 2

在OnChangeText中只调用checkEmailSyntax函数。然后在checkEmailSyntax中的if中输入

setData({...data, wrongEmailSyntax: false, input_email: inputVal})

As A G描述状态是异步的!

新代码

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