如何判断触发useEffect钩子的具体依赖项？

先看你的代码：

const OAuthButtons: React.FC<OAuthButtonsProps> = () => {
  const [signInWithGoogle, userCred1, loading, error] = useSignInWithGoogle(auth);
  const [signInWithGithub, userCred2, loading1, error1] = useSignInWithGithub(auth);

  const createUserDocument = async (user: User) => {
    const userDocRef = doc(firestore, "users", user.uid);
    await setDoc(userDocRef,JSON.parse(JSON.stringify(user)));
  }

  React.useEffect(() => {
    // if (userCred1) {
    //   createUserDocument(userCred1.user);
    // }
  }, [userCred1,userCred2]);
}

你的需求是在用户通过Google/GitHub登录时，判断是哪个依赖触发了useEffect，进而检查用户是否存在并完成存储。下面提供几种可行方案：

方案1：拆分useEffect（最简单直接） #

把原来的一个useEffect拆成两个，分别监听userCred1和userCred2，这样就能明确知道是哪个登录方式触发的：

// 监听Google登录结果
React.useEffect(() => {
  if (userCred1?.user) {
    // 先检查用户是否已存在，再决定是否存储
    createUserDocument(userCred1.user);
  }
}, [userCred1]);

// 监听GitHub登录结果
React.useEffect(() => {
  if (userCred2?.user) {
    createUserDocument(userCred2.user);
  }
}, [userCred2]);

方案2：用useRef追踪上一次的依赖值 #

如果不想拆分useEffect，可以用useRef保存上一次的userCred1和userCred2，对比当前值判断哪个发生了变化：

const prevCredsRef = React.useRef({
  userCred1: null,
  userCred2: null
});

React.useEffect(() => {
  const prevCreds = prevCredsRef.current;
  
  // 判断Google登录结果变化
  if (userCred1 !== prevCreds.userCred1 && userCred1?.user) {
    createUserDocument(userCred1.user);
  }
  
  // 判断GitHub登录结果变化
  if (userCred2 !== prevCreds.userCred2 && userCred2?.user) {
    createUserDocument(userCred2.user);
  }
  
  // 更新ref保存当前值
  prevCredsRef.current = { userCred1, userCred2 };
}, [userCred1, userCred2]);

补充：检查用户是否已存在 #

你提到需要检查用户是否存在再存储，修改createUserDocument函数即可：

const createUserDocument = async (user: User) => {
  const userDocRef = doc(firestore, "users", user.uid);
  const userDocSnap = await getDoc(userDocRef);
  
  // 仅当用户不存在时才创建
  if (!userDocSnap.exists()) {
    // 可添加额外字段，比如登录方式、创建时间等
    await setDoc(userDocRef, {
      ...user,
      provider: user.providerData[0].providerId,
      createdAt: new Date()
    });
  }
}

内容的提问来源于stack exchange，提问作者Anuj Maurya