无法更新状态 - react-native

Posted 2023-02-16

【中文标题】无法更新状态 - react-native

【英文标题】：Unable to update state while using React Native

【发布时间】：2022-01-22 01:10:49

【问题描述】：

试图掌握反应钩子useState。目前我无法更新我的错误对象的状态，有点不确定我哪里出错了。这里的想法是将错误消息存储在注册表单中

在此示例中，用户提交了一个空的名字，但错误对象始终保持为空

谁能看看我做错了什么，好吗？谢谢

    export const SignUp = () => 

      const [errors, setErrors] = useState();

      const validateFirstName = () => 
        if (formData.firstName === undefined) 
          setErrors(...errors, firstName: 'First Name is required');
          console.log(errors); // When condition is met errors is still an empty object
        
      ;

    

【问题讨论】：

让你多次运行它，因为最初，它会因为重新渲染而记录为空，因为之前的状态是空的。

【参考方案1】：

试试这个，我在代码中添加了 cmets。

export const SignUp = () => 

  const [errors, setErrors] = useState();
  console.log(errors); // try with this
  const validateFirstName = () => 
    if (formData.firstName === undefined) 
      setErrors(...errors, firstName: 'First Name is required');
      console.log(errors); // at this point, it is normal to have an empty errors, cause your component did not re-rendered yet
    
  ;

【讨论】：

啊，我明白了，是的，当以const [errors, setErrors] = useState(); 登录时，我可以看到正在更新的错误。谢谢你的解释

【参考方案2】：

你所做的基本上是正确的。当您调用 console.log() 时，状态还没有改变。如果你想在你的状态改变时做一些事情，你可以使用 useEffect 钩子并将状态作为第二个参数传递。当您在 jsx 代码中的某个地方使用错误状态时，它会按照您的预期工作。

    export const SignUp = () => 
    
      const [errors, setErrors] = useState();

      useEffect(() => 
        console.log(errors);
      ,[errors])
    
      const validateFirstName = () => 
        if (formData.firstName === undefined) 
          setErrors(...errors, firstName: 'First Name is required');
        
      ;