javascript - 快照错误 - 用户之间不需要的切换

Question

我是 firebase 和 React 的新手，我正在构建一个应用程序，它是几个小组成员之间的游戏。我们使用 Snapshot 来更新在游戏过程中发生变化的数据，以便每个人都能及时了解不同组成员的所有操作。问题是，由于某种原因，当一个用户按下某个按钮时，它会执行它应该执行的所有操作，但此外它会切换到组中的另一个用户。我们假设它与快照有关，因为这是我们所做的最新更改，而在此之前我们没有遇到此问题。

这是我们获取 currentUser 数据的 useEffect：

useEffect(() => {
    // the function load the user data from the db
    const fetchUser = () => {
      if (userId) {
        console.log("USER ID IN FETCHUSER", userId);
        db.collection("users")
          .doc(userId)
          .onSnapshot(doc => {
            const dataUser = { ...doc.data(), id: doc.id };
            if(Object.keys(dataUser).length < 8){
              forceRender();
              return;
            }
            setUserData(dataUser);
          })
        
    
      } else {
        console.log("ERROR: no userId")
        setUserData(null);
        setGroupData(null);
        setGroupMemberData([]);
        setLoadData(false);
      }
    };
    fetchUser();
  }, [userId]);

另一个用来获取 groupMembers 数据的 useEffect：

useEffect(() => {
    // the function load the group data and the group members data from the db
    const fetchGroup = () => {
      if (userData) {
        // load group data
        db.collection("groups")
          .doc(userData.groupId)
          .onSnapshot((doc) => {
            const dataGroup = { ...doc.data(), id: doc.id };
            if(Object.keys(dataGroup).length < 5){
              forceRender();
              return;
            }
            setGroupData(dataGroup);
          });

        //load group members data
         db.collection("users")
        .where("groupId", "==", userData.groupId).onSnapshot(snapshot => {
          setGroupMemberData(snapshot.docs.map(doc => {
            return {...doc.data(), id: doc.id}
          }))
          setLoading(false)
        })
       
      } else {
        console.log("no userData")
        setUserData(null);
        setGroupData(null);
        setGroupMemberData([]);
        setLoadData(false);
      }
    };
    fetchGroup();
  }, [userData]);

还有另一个 useEffect 检查 currentUser 是否已更改：

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      console.log("USER: ", user)
      if(user){
        setUserId(user.uid)
      }
      setCurrUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

我们不确定为什么快照会对用户进行这种不必要的更改，是否有办法阻止我们尚未完成的用户更改？也许我们没有以正确的方式使用快照，除了这个问题之外它工作得很好。

谢谢！

标签： javascriptreactjsfirebase