时间戳

首页 > 解决方案 > 尝试从无状态 React 组件中的 localStorage 获取数据时出现 NodeInvocationException

asp.net - 尝试从无状态 React 组件中的 localStorage 获取数据时出现 NodeInvocationException

问题描述

我已经像这样实现了我的应用程序布局：

const Layout: React.SFC<IDefaultProps> = props => {
  const { component: Component, ...rest } = props;
  const logged = userServices.getUserLocalStorage();
  return (
    <Route
      {...rest}
      render={matchProps =>
        logged != null ? (
          <div className="container-fluid">
            <NavMenuLogged {...matchProps} />                
            <div className="row wu-content">
              <Component {...matchProps} />
            </div>                
            <Footer />
          </div>
        ) : (
          <Redirect to="/" />
        )
      }
    />
  );
};

希望将用户的登录信息保存在 localStorage 中，并从那里能够将用户重定向到登录；但我发现我无法访问 SFC 组件中的 localStorage。有人对此有解决方案吗？（优雅与否……）

这是 getUserLocalStorage() 函数：

export function getUserLocalStorage(){
    let user:Utils.User = JSON.parse(localStorage.getItem("user") || '{}');
    return user;
}

这是我得到的错误：

An unhandled exception occurred while processing the request.
NodeInvocationException: localStorage is not defined
ReferenceError: localStorage is not defined
at Object.getUserLocalStorage [as b] (E:\Trabajo\...\ClientApp\dist\main-server.js:9138:27)
at Layout (E:\...\ClientApp\dist\main-server.js:38836:102)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (E:\...\ClientApp\dist\vendor.js:43899:14)
at ReactCompositeComponentWrapper._constructComponent (E:\...\ClientApp\dist\vendor.js:43875:19)
at ReactCompositeComponentWrapper.mountComponent (E:\...\ClientApp\dist\vendor.js:43778:21)
at Object.mountComponent (E:\...\ClientApp\dist\vendor.js:11753:35)
at ReactCompositeComponentWrapper.performInitialMount (E:\...\ClientApp\dist\vendor.js:43961:34)
at ReactCompositeComponentWrapper.mountComponent (E:\Trabajo\...\ClientApp\dist\vendor.js:43848:21)
at Object.mountComponent (E:\...\ClientApp\dist\vendor.js:11753:35)
at ReactDOMComponent.mountChildren (E:\...\ClientApp\dist\vendor.js:47391:44)

标签： asp.netreactjsreact-routertypescript-typingsserver-side-rendering

解决方案

推荐阅读