我用 React 创建了一个登录系统，它在用户登录时存储一个会话。当页面重新加载时，我添加了一个函数来检查会话是否存在，然后检查setState()totrue或 to 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 {}，那么它会告诉我我无法设置未定义的状态。