React Native - 函数捕获旧的钩子值答案

【问题标题】：React Native - function captures old hook valueReact Native - 函数捕获旧的钩子值
【发布时间】：2019-08-22 09:11:43
【问题描述】：

我遇到了函数捕获状态变量的问题：

const SignIn = ({componentId}) => {
    const [email, setEmail] = useState("");
    const [emailError, setEmailError] = useState(false);
    ...
    const getEmail = event => {
        setEmail(event);
        if (emailError && email.length > 0){
          setEmailError(false);
        }
    };
    .....
}

问题在于 getEmail 函数捕获 emailError 和 email 变量。因此，当“getEmail”第一次运行时，它会正确地处理正确的（最新的）电子邮件和 emailError。但是，当该函数第二次运行时，它引用了错误（旧）电子邮件和 emailError，因为该函数仍然捕获了旧值。

如果有人知道如何避免此问题或有提示，请告诉我。感谢您的帮助。

【问题讨论】：

你是怎么调用getEmail函数的？
这个用在TextInput的onChangeText中，基本上是在TextInput的文本变化时运行
试试这个if (!emailError && email.length > 0)，你在哪里设置emailError到true？
嗨 Hiraku，请阅读此内容 - stackoverflow.com/help/someone-answers，然后尝试关闭问题。

标签： javascript react-native react-hooks

【解决方案1】：

试试这个，

 const SignIn = ({componentId}) => {
 const [email, setEmail] = useState("");
 const [emailError, setEmailError] = useState(false);
 ...
 const getEmail = event => {
    setEmail(event);
    if (emailError && email.length > 0){
      setEmailError(false);
      setEmail("");
    }
};
.....

}

【讨论】：

【解决方案2】：

我认为你的情况有问题，

if (emailError && email.length > 0){

您正在设置email，在下一步中您将尝试访问email。

由于setState 的async 性质，更新后的email 将不适用于您的情况。

你可以试试这个，

const getEmail = event => {
    setEmail(event);
    if (emailError && event.length > 0){
      setEmailError(false);
    }else{
      setEmailError(true);
    }
};

【讨论】：