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

不要在constructor() 中调用setState()。相反，如果一个组件 需要使用本地状态，将初始状态分配给this.state 直接在构造函数中。

componentDidMount() 在组件安装后立即调用。 您可以立即拨打setState()componentDidMount() 和 触发额外的渲染，但这发生在浏览器之前 更新屏幕，调用render() 两次。

read more here

您可以从_auth 方法返回sessionStorage 的值并使用该值在构造函数中创建状态，或者您可以简单地在componentDidMount() 中调用this._auth，这仍然可以，但主要用于用于异步计算、副作用等。