Reactjs 如何在设置authContext和登录状态之前等待cookie。反应，火力基地

我有一个createUser函数，它向express发送一个axios req，并花费一些时间来完成创建一个firebase认证用户，创建一个令牌，然后将令牌作为cookie发送回用户

我还有一个getLoggedIn函数，它接受cookie并将其发送到express以获得身份验证，然后相应地调整authContext

我的函数如下所示：

等待createUser（registerData）。然后（（）=>getLoggedIn（））

我的问题是getLoggedIn（）在createUser发送回cookie之前被提前调用。你知道怎么解决这个问题吗？有没有办法倾听饼干的变化？我没有看到其他人这样做，我是否有错误的方法

谢谢你的帮助

新用户表单

 const { getLoggedIn, loggedIn } = useContext(AuthContext);

  const register = async (e) => {
    e.preventDefault();
     const registerData = {
      email,
      password,
      passwordVerify,
    };
    try {
      await createUser(registerData).then(() => getLoggedIn());
    } catch (err) {
      console.log(err);
    }
  }};

CreateUser

export const createUser = async (props) => {
      console.log("New User Creation Initiated", props);
      const { email, password, passwordVerify } = props;
      let userObject = { tokenId: null };
    
      try {
        await firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(({ user }) => {
            console.log("createUserWithEmailAndPassword", user);
            user
              .getIdToken()
              .then((tokenId) => {
                userObject = { tokenId: tokenId };
                axios.post(`${domain}/auth`, userObject);
              })
              .catch((err) => console.log("new user error", err));
           })
          .catch((err) => {
            console.log("createUser Error", err);
          });
        return;
      } catch (err) {
        console.log("New User Creation Error: ", err);
      }
    };

AuthContext

const AuthContextProvider = (props) => {
  console.log("AuthContextProvider Initiated");

  const [loggedIn, setLoggedIn] = useState(null);

  const getLoggedIn = async () => {
    console.log("getLoggedIn Initiated");
    let validatedUser = await axios.get(`${domain}/auth/loggedIn`);
    console.log("AuthContextProvider validatedUser", validatedUser);
    setLoggedIn(validatedUser.data);
  };

  useEffect(() => {
    getLoggedIn();
  }, []);

  return (
    <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
      {props.children}
    </AuthContext.Provider>
  );
 };

---

您可以在AuthContext中这样使用onAuthStateChanged

const AuthContextProvider = (props) => {
  console.log("AuthContextProvider Initiated");

  const [loggedIn, setLoggedIn] = useState(null);

  const getLoggedIn = async () => {
    console.log("getLoggedIn Initiated");
    let validatedUser = await axios.get(`${domain}/auth/loggedIn`);
    console.log("AuthContextProvider validatedUser", validatedUser);
    setLoggedIn(validatedUser.data);
  };
  
  const handleAuthStateChanged = user => {
    if(user) { //user login
      getLoggedIn()
    } else { //user logout
      setLoggedIn(null)
    }
  }

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      handleAuthStateChanged(user)
    })
    return unsubscribe
  }, []);
  

  return (
    <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
      {props.children}
    </AuthContext.Provider>
  );
};

const AuthContextProvider=（道具）=>{
log（“AuthContextProvider已启动”）；
const[loggedIn，setLoggedIn]=useState（null）；
const getLoggedIn=async（）=>{
console.log（“getLoggedIn已启动”）；
让validateUser=wait axios.get（`${domain}/auth/loggedIn`）；
log（“AuthContextProvider ValidateUser”，ValidateUser）；
setLoggedIn（验证用户数据）；
};
const handleAuthStateChanged=用户=>{
如果（用户）{//用户登录
getLoggedIn（）
}else{//用户注销
setLoggedIn（空）
}
}
useffect（（）=>{
const unsubscribe=firebase.auth（）.onAuthStateChanged（（用户）=>{
handleAuthStateChanged（用户）
})
退订
}, []);
返回(
{props.children}
);
};

在我的createUser函数中，我移动了axios调用，并将其返回到firebase.auth（）承诺序列之外。现在好像有用了

export const createUser = async (props) => {
  console.log("New User Creation Initiated", props);
  const { email, password, passwordVerify } = props;
  let userObject = { tokenId: null };

  try {
    await firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(({ user }) => {
        console.log("createUserWithEmailAndPassword", user);
        user
          .getIdToken()
          .then((tokenId) => {
            userObject = { tokenId: tokenId };
          })
          .catch((err) => console.log("new user error", err));
      })
      .catch((err) => {
        console.log("createUser Error", err);
      });
    return axios.post(`${domain}/auth`, userObject);
  } catch (err) {
    console.log("New User Creation Error: ", err);
  }
};

---

感谢您的回复，但不幸的是，问题仍然存在。现在发生的只是getLoggedIn（）触发两次，两次都是空响应。我的“/loggedIn”快车路线没有req.cookies.token可供使用。

export const createUser = async (props) => {
  console.log("New User Creation Initiated", props);
  const { email, password, passwordVerify } = props;
  let userObject = { tokenId: null };

  try {
    await firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(({ user }) => {
        console.log("createUserWithEmailAndPassword", user);
        user
          .getIdToken()
          .then((tokenId) => {
            userObject = { tokenId: tokenId };
          })
          .catch((err) => console.log("new user error", err));
      })
      .catch((err) => {
        console.log("createUser Error", err);
      });
    return axios.post(`${domain}/auth`, userObject);
  } catch (err) {
    console.log("New User Creation Error: ", err);
  }
};