在ReactJS中的render（）之前需要执行功能

Question

我已经创建起反应，因此当存储在用户登录时重新加载页面，我已经加入，如果存在会话，然后要么应该检查功能的会话的登录系统setState()，以true或false。

由于我是React的新手，所以我不确定如何执行此功能。请在下面查看我的App.js代码：

import React from 'react';
import './css/App.css';
import LoginForm from "./LoginForm";
import Dashboard from "./Dashboard";

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            renderLoginForm: true
        };
        this.handleLoginFormMount = this.handleLoginFormMount.bind(this);
    }

    handleLoginFormMount() {
        this.setState({
            renderLoginForm: false
        });
    }

    // Check session function.
    checkSession() {
        fetch('/check-session', {
            credentials: 'include'
        })
        .then((response) => {
            return response.json();
        })
        .then((sessionResult) => {
            if (sessionResult.username) {
                console.log('false');
                this.setState({
                    renderLoginForm: false
                });
            } else {
                console.log('true');
                this.setState({
                    renderLoginForm: true
                });
            }
        })
        .catch((error) => {
            console.log('Error: ', error);
        });
    }

    render() {

        checkSession();

        return (
            <div className="App">
                {this.state.renderLoginForm ? <LoginForm mountLoginForm={this.handleLoginFormMount} /> : null}
                {this.state.renderLoginForm ? null : <Dashboard />}
            </div>
        );
    }
}

export default App;

有checkSession()在这个位置输出在加载页面时，控制台的情况如下：

Line 50: 'checkSession' is not defined no-undef

如果将函数放在之外class App extends React.Component {}，则它告诉我无法设置未定义状态。

Answer 1

功能组件：就我而言，我希望我的代码在组件呈现在屏幕上之前运行。useLayoutEffect是 React 为此目的提供的一个钩子。

import React, { useLayoutEffect } from "react";
...
const App = () => {
   
    useLayoutEffect(() => {
        //check local token or something

    }, []);
}

阅读更多： https: //reactjs.org/docs/hooks-reference.html#uselayouteffect

Answer 2

有checkSession()在这个位置输出在加载页面时，控制台的情况如下：

Line 50:  'checkSession' is not defined  no-undef

那是因为它是一种方法，但是您像一个独立的函数一样调用它。电话应该是this.checkSession();。但是请继续阅读。

分别：

该render函数必须是纯函数，不能有诸如更改状态之类的副作用。而是将任何副作用代码放入componentDidMount; 中。从该生命周期方法的文档中：

如果需要从远程端点加载数据，这是实例化网络请求的好地方。

确保您的组件针对原始状态（在会话检查之前）以及更新后的状态（在会话检查之后）正确呈现。

文档中有更多有关生命周期方法的信息。

或者，如果该组件没有会话就无法做任何有用的事情，则可以将会话检查移至其父组件，并让父组件仅在具有会话检查结果时才渲染此子组件。