javascript - 为什么我的反应上下文状态没有更新？

Question

我有一个userContext存储有关用户的数据（例如用户名、简历、个人资料图片等）

我在它上面还有一个authContext存储关于用户的 Firebase 身份验证。

我有一个名为refreshUserData(). 我将其传递给需要从 Firestore 中提取最新用户数据的功能组件。

userData但是，虽然我可以看到数据确实已经在firebase 中更新并已被拉入，但在我的上下文中存储的对象尚未更新。

这是我的背景：

import React, { useContext, useState, useEffect } from "react";
import { getUserByUserId, getUserNotifications } from "../services/firebase";
import { useAuth } from "./AuthContext";

const UserContext = React.createContext();

export function useUser() {
  return useContext(UserContext);
}

export function UserProvider({ children }) {
  //----------------------------------------------------------------------
  const { currentUser } = useAuth();
  const [userData, setUserData] = useState();
  const [notifications, setNotifications] = useState([]);
  const [openNotifications, setOpenNotifications] = useState(false);
  const [openSettings, setOpenSettings] = useState(false);
  const [loading, setLoading] = useState(true);
  //----------------------------------------------------------------------

  //Whenever the users authentication is changed, it will retrieve the users userData if logged in.
  useEffect(async () => {
    if (currentUser) {
      const data = await getUserByUserId(currentUser.uid);
      const notifications = await getUserNotifications(currentUser.uid);
      setUserData(data);
      setNotifications(notifications);
      setLoading(false);
    } else {
      setUserData();
      setNotifications([]);
      setLoading(false);
    }
  }, [currentUser]);
  //----------------------------------------------------------------------

  //This is a function I want to call just to refresh the user data,
  async function refreshUserData() {
    if (currentUser) {
      setLoading(true);
      const data = await getUserByUserId(currentUser.uid);
      const notifications = await getUserNotifications(currentUser.uid);
      setUserData(data);
      setNotifications(notifications);
      setLoading(false);
    }
  }
  //----------------------------------------------------------------------

  //This is function to refresh notifications only
  function refreshNotifications(notifications) {
    setNotifications(notifications);
  }
  //----------------------------------------------------------------------

  //I have a notifications menu, if a user clicks on any other div, I close the notifications menu in the nav bar using this.
  function closeNotifications(state) {
    setOpenNotifications(state);
  }
  //----------------------------------------------------------------------
  //I also have a settings menu in the nav bar, if a user clicks on any other div, I close the settings menu in the nav bar using this.
  function closeSettings(state) {
    setOpenSettings(state);
  }
  //----------------------------------------------------------------------
  
  //This closes both menus at once.
  function closeMenus() {
    setOpenSettings(false);
    setOpenNotifications(false);
  }
  //----------------------------------------------------------------------
  const value = {
    userData,
    notifications,
    openSettings,
    openNotifications,
    refreshNotifications,
    closeNotifications,
    closeSettings,
    closeMenus,
    refreshUserData,
  };
  //----------------------------------------------------------------------
  return (
    <UserContext.Provider value={value}>
      {!loading && children}
    </UserContext.Provider>
  );
}

那么，如何确保refreshUserData()确实强制更新并更新状态以供其他组件使用？

TIA 伙计们！

标签： javascriptreactjsstatesetstatereact-context