需要在 ReactJS 中的 render() 之前执行函数答案

【问题标题】：Need to Execute Function before render() in ReactJS需要在 ReactJS 中的 render() 之前执行函数
【发布时间】：2021-05-18 13:14:58
【问题描述】：

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

【问题讨论】：

首先由于checkSession是组件函数，你需要使用this.checkSession();调用它。用于检查用户会话是否有效。您在 lefecycle 方法中进行 api 调用。在我知道您使用的是什么版本的 reactjs 之前，我无法告诉您正确的生命周期。请告知
感谢您的回复。我正在使用最新版本的 React。
旁注：您的fetch 呼叫缺少成功检查，this post on my anemic little blog 中的详细信息。

标签： javascript reactjs

【解决方案1】：

在此位置有checkSession() 在加载页面时会在控制台中输出以下内容：
Line 50:  'checkSession' is not defined  no-undef

那是因为它是一种方法，但您将其称为独立函数。电话应为this.checkSession();。但请继续阅读。

分别：

render 函数必须是纯函数，不能有改变状态等副作用。相反，将任何副作用代码放入componentDidMount；来自该生命周期方法的文档：

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

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

更多关于生命周期方法等in the documentation。

或者，如果这个组件在没有会话的情况下不能做任何有用的事情，你可以将会话检查移到它的父组件，并让父组件在它有会话检查结果时才渲染这个子组件。

【讨论】：

谢谢你。我会看看componentDidUpdate 并希望它能够正常工作。
我还在为如何在render() 被命中之前执行该函数而苦苦挣扎。我考虑将代码放在componentDidMount 中，但登录表单会在会话被检查然后被删除之前显示。我认为这是因为代码是在调用 componentDidMount 之前呈现的。你知道我可以把这个放在哪里吗？我是否可能需要将状态设置为显示空白页，然后让componentDidMount 设置正确的状态（这有意义吗？）。如果你能提供帮助，谢谢。
@Matt - 在调用 render 之前，您不能等待异步进程完成。相反，您可以做以下两件事之一： 1. 让组件在流程完成之前正确处理自己的渲染，并为它不知道结果的事实提供适当的状态（当然，它会在何时重新渲染它的状态会随着过程的完成而改变）。 2. 让parent组件做异步检查，检查完成后才渲染这个组件。
我认为这很有意义，我必须使用componentDidMount 处理它以重新呈现正确的数据。实际上，将函数添加到index.js，然后在检查后渲染<App /> 可能更容易。我在正确的轨道上吗？谢谢。
@Matt - 是的（对不起，我最初指出了错误的方法，但你是对的，它是componentDidUpdate，现在已经更新了答案）。其中任何一个（使用componentDidUpdate 或等到你有会话再让你的应用程序渲染组件）都很好。可能是后者，除非您的组件在检查未完成时可以做一些有用的事情。

【解决方案2】：

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

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

    }, []);
}

【讨论】：