使用 useEffect 解决 useState 异步问题

Question

我知道 useState 异步工作，我想有条件地渲染我的部分代码。

这是条件部分：

    {vEmail ? (
      <Text style={{ color: "#DC8989" }}>Invalid email!</Text>
    ) : vEmailServer == false ? (
      <Text style={{ color: "#DC8989" }}>Email must be unique</Text>
    ) : null}

这是带有 useState 的数据库进程

const validateEmailServer = (mail) => {
    usersRef //references to database
      .where("email", "==", mail)
      .get()
      .then((querySnapshot) => {
        querySnapshot.size == 0
          ? setvEmailServer(true) // here is the useState part It sets vEmailServer 
          : setvEmailServer(false); // here is the useState part
      })
      .catch((err) => console.log("err"));
  };

如果我将这两个代码与下面的提交处理程序一起使用。 在第一次渲染中， vEmailServer不会改变。 我发现我必须使用 useEffect Hooks 来渲染代码的特定部分，但我不知道该怎么做？

提交处理程序：

  const Submit = () => {
    validateEmail(email) ? setvEmail(false) : setvEmail(true);
    validateNickname(nickname) ? setvNickname(false) : setvNickname(true);
    validatePassword(password) ? setvPassword(false) : setvPassword(true);
    validateEmailServer(email);
    validateNicknameServer(nickname);

    if (
      validateEmail(email) &&
      validateNickname(nickname) &&
      validatePassword(password)
// I need some operation for do not navigating the page when `vEmailServer=false`
    ) {
      navigation.navigate("UserCredential", {
        email: email,
        password: password,
        nickname: nickname,
      });
    }
  };