javascript 使用React Native时无法更新状态

gudnpqoy 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(197)

我正在尝试掌握React钩子useState。目前我无法更新errors对象的状态，有点不确定我哪里出错了。这里的想法是将错误消息存储在注册表单中。
在这个例子中，一个用户提交了一个空的名字，但是错误对象总是保持为空。我做错了什么？

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

    }

JavaScript

来源：https://stackoverflow.com/questions/70421459/unable-to-update-state-while-using-react-native

2条答案

按热度按时间

y1aodyip1#

在状态更新之前，您正在控制台日志记录。您应该知道，更新状态是一项异步任务。请尝试按以下方法操作，我在代码中添加了注解：

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

赞(0）回复(0）举报 2023-03-21

kmpatx3s2#

你所做的基本上是正确的。当你调用console.log（）时，状态还没有改变。如果你想在状态改变时做些什么，你可以使用useEffect钩子并将状态作为第二个参数传递。当你在jsx代码的某个地方使用errors状态时，它会像你期望的那样工作。

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

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 使用React Native时无法更新状态

2条答案

相关问题

热门标签

最新问答