在 React 中，等待在 sessionStorage 中查找值的正确方法是什么？

Question

我正在使用 React 16。我有一个钩子，可以确定会话令牌是否已存储在会话存储中...

import { useEffect } from 'react';
import { useAuthenticationState, useAuthenticationDispatch } from '../context';

const useAuthentication = () => {
  const authenticationState = useAuthenticationState();
  const updateAuthenticationState = useAuthenticationDispatch();

  useEffect(() => {
    const auth_token = sessionStorage.getItem('token');
    console.log("auth token: " + auth_token);
    updateAuthenticationState({
      type: 'field',
      fieldName: 'isAuthenticated',
      payload: !!auth_token,
    });
  }, [updateAuthenticationState]);

  const isAuthenticated = authenticationState.isAuthenticated;

  return {
    isAuthenticated,
  };
};

export default useAuthentication;

我想将存储在会话存储中的值传递给一个组件，该组件将呈现另一个组件或根据 my hook 的值重定向...

const DirectoryApp = () => {
  console.log("starting get hook value ...");
  const { isAuthenticated } = useAuthentication();
  console.log("is auth:" + isAuthenticated);

  return (
      <Router>
        ...
                  <PrivateRoute
                  authed={isAuthenticated} path="/unapproved-list/"
                  component={UnapprovedList}
                  />

但是这一行

const { isAuthenticated } = useAuthentication();

没有正确获取 sessionStorage 中的值——它总是初始返回 false。我认为这是因为我没有等待钩子的结果returns，但是如果我这样做

const { isAuthenticated } = await useAuthentication();

我收到错误

Syntax error: Unexpected reserved word 'await'. (24:31)

如何正确等待钩子的值returns？

Answer 1

在 DirectoryApp 组件初始渲染后调用效果。这意味着您的 useAuthentication 挂钩获取存储在 authenticationState 和 returns 中的任何内容，而不依赖于 useEffect 挂钩内部的代码，此时蚂蚁 returns DirectoryApp组件，DirectoryApp 使用此初始值呈现，并且仅在此之后执行效果。

没有什么可等待的，因为您提供的代码中没有异步代码。

根据您的导入和代码结构，我假设您正在尝试使用 React.Context 和内部的 reducer 来管理身份验证状态。在这种情况下，您的 AuthenticationProvider 组件在某种程度上包装了 DirectoryApp ，因此您可以通过将读取的会话存储移动到 reducer 的第三个初始化参数来解决问题：

const reducer = (state, action) => {
    // reducer logic
};

const StateContext = createContext();
const DispatchContext = createContext();
const useAuthenticationState = () => useContext(StateContext);
const useAuthenticationDispatch = () => useContext(DispatchContext);

const AuthenticationProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, { isAuthenticated: false }, (arg) => {
        const auth_token = sessionStorage.getItem('token');
        
        return { ...arg, isAuthenticated: !!auth_token };
    });
    
    return (
        <DispatchContext.Provider value={dispatch}>
            <StateContext.Provider value={state}>
                {children}
            </StateContext.Provider>
        </DispatchContext.Provider>
    );
};

const App = () => (
    <AuthenticationProvider>
      <DirectoryApp />
    </AuthenticationProvider>
);

sessionStorage.getItem 是一个同步函数，因此您将在 DirectoryApp.

的第一次渲染之前获得正确的初始化状态

在 React 中，等待在 sessionStorage 中查找值的正确方法是什么？

In React, what is the proper way to await looking up a value in sessionStorage?

authentication

local-storage

async-await

reactjs

react-hooks