无法更新状态 - react-native答案

【问题标题】：Unable to update state while using React Native无法更新状态 - 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
        }
      };

    }

【问题讨论】：

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

标签： react-native react-hooks use-state

【解决方案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'});
        }
      };
    
    }

【讨论】：