Question

希望你一切顺利:)

我有一个“auth.js”文件，带有 aysnc 函数来获取 userId，然后将其存储在会话存储中。这是：

export let userId = sessionStorage.getItem("userId");

const getUserId = async () => {
  if (token) {
    await axios
      .get(`${baseURL}/auth/user`, {
        headers: {
          authorization: token
        }
      })
      .then(function (response) {
        const { data } = response;
        return sessionStorage.setItem("userId", data.userId);
      })
      .catch(function (err) {
        return undefined;
      });
  }
};
getUserId();

然后我在所有需要它的组件中访问这个变量，以便发出其他请求。 App.js 中的示例：

useEffect(() => {
    getActiveGames();
    if (token && userId) {
      getCart();
      getWallet();
      getWalletPayments();
    }
  }, []);

问题是，在第一次渲染中，userId 为空（显然），我正在尝试不同的方法来更新甚至重新渲染，以获得更新后的值，但似乎没有任何效果。我知道有一个基本的解决方案，但我就是想不通。

如果你能帮忙就太好了:)

Answer 1

选项 1 :

如果你想知道 sessionStorage 中 userId 是什么时候填写的：

在您的组件状态中添加 userId。
监听 storage 事件。见StorageEvent
在 useEffect 中添加 userId 作为依赖项。

const getUserId = ()=> sessionStorage.getItem("userId");
const [userId, setUserId] = useState(getUserId());
    
useEffect(() => {
  const storage = (event) => {
    if(event.originalEvent.storageArea===sessionStorage){
       const data = getUserId();
       if(data) setUserId(data);
    } 
  };
  window.addEventListener("storage", storage);
   
  return ()=> window.removeEventListener("storage", storage)
}, []);
    
useEffect(() => {
  getActiveGames();
  if (token && userId) {
     getCart();
     getWallet();
     getWalletPayments();
  }
}, [userId]);

选项 2：

您可以使用 Context

管理 userId

在 getUserId 中返回 data.userId。

const UserContext = React.createContext();

const UserProvider = ({children}) => {
  const [userId, setUserId] = useState(null);

  useEffect(()=> {
    getUserId()
     .then(user => setUserId(user));
  }, []);

  return <UserContext.Provider value={userId}>
          {children}
         </UserContext.Provider>
}

在你的 App.js 中

return (<UserProvider>
    ...
</UserProvider)

在您的应用中的任何组件中使用 userId：

 const userId = useContext(UserContext);

 useEffect(() => {
    getActiveGames();
    if (token && userId) {
       getCart();
       getWallet();
       getWalletPayments();
    }
 }, [userId]);

Answer 2

我认为您可以使用状态管理器，例如 redux 或 contex api 来更新状态 userId，例如：

.then(function (response) {
        const { data } = response;
// here you set your state (userId = data.userId)
        return sessionStorage.setItem("userId", data.userId);
      })

希望对你有用

如何在 React 中监听外部变量变化

2 个答案:

选项 1 :

选项 2：