React Typescript：重新加载页面后获取sessionStorage

Question

用户登录后，身份验证令牌会保存在 sessionStorage 中，页面会重新加载。现在重新加载后，我想读取该数据并将其存储在 state 中，但渲染不会从 <Login /> 更改为 <Layout>...

export default class Home extends React.Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            auth: true,
        }

        this._auth();
    }

   public render() {
        return (
            <>
                {this.state.auth ?
                    <Login /> :
                    <Layout>
                    ...
                    </Layout>
           </>
        )
   };

   private _auth(): void {
        if (sessionStorage.getItem("accessGranted") !== "")
            this.setState({ auth: true });
        else
            this.setState({ auth: false });
   }

Answer 1

Do not call setState() in constructor(). Instead, if a component needs to use a local state, assign the initial state to this.state directly in the constructor.

componentDidMount() invokes immediately after a component mounts. You can call setState() immediately in componentDidMount() and triggers an extra rendering, but this happens before the browser updates the screen, calling render() twice.

React Typescript：重新加载页面后获取sessionStorage

React Typescript: get sessionStorage after reload of page

javascript

typescript

reactjs

antd