登录后渲染页面反应 [英] Rerender page after login in react

问题描述

我具有登录页面组件，并且要在成功登录后重新呈现页面。

我的 App.js 文件：

I have Login page Component and i want to rerender page after successfully login.
My App.js File:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Dashboard from "./components/Dashboard";
import Login from "./components/Login";
import "antd/dist/antd.css";
import './App.css';

class App extends Component {
constructor(props){
    super(props);
    this.state = {loginStatus: "0"};
}
componentDidMount(){
    if(localStorage.getItem("user_id")){
        this.setState({ loginStatus: "1" });
    }
}
  render() {
    return (
        <Router>
             <div>
                <Route path="/" exact render={(props) => {
                    if(this.state.loginStatus === "1")
                        return <Dashboard />;
                    else
                        return <Login />;
                    }}
                />
            </div>
        </Router>
    );
 }
}

export default App;

我的Login.js是：

And My Login.js is:

import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom";
import { Input, Card, Icon, Button, Form, message } from 'antd';
const axios = require('axios');

class LoginPage extends Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
    if (!err) {
        axios.get('http://mybackendsite.com/api/login', {
            params: {
                mobile: "986541123331",
                password: "123456789"
            }
        })
        .then(function (response) {
            console.log(response.data);
            if(response.data.response === "wrong"){
                console.log("password is wrong");
            }else{
                console.log("password is true and logged in successfully");

                //SOME CODE TO RERENDER PAGE AND SHOW DASHBOARD
                reRenderApp(); //sample function
            }

        })
        .catch(function (error) {
            console.log("err is:" + error);
        })
    }
});
  }
  render() {
      //SOME ELEMENTS
 }

我需要一个函数（例如：reRenderApp（））来重新渲染页面并显示仪表板以登录用户。
我可以使用window.location.reload，但我不想这样做。我想重新渲染页面而不刷新。
我该怎么做？

I need a function (for example : reRenderApp() ) to rerender page and show dashboard to logged in user. i can use window.location.reload but I do not want to do this. I want rerender page without refresh. how I can do this?

推荐答案

其中一种方法是借助回调函数。

One of the ways that you can do this is with the help of a callback function.

您可以将道具从App.js传递到Login.js，然后在API返回登录状态后就可以调用该回调道具

You can pass on a prop from the App.js to Login.js and then as soon as the API returns the login status you can call that callback prop function where you just change the state of the loginStatus.

这些是可以为您完成工作的一些更改。

These are the few changes that can get the work done for you.

在App.js中

return (
  <Login
    onSuccess={() => {
      this.setState({ loginStatus: true });
    }}
  />
);

在Login.js中

//SOME CODE TO RERENDER PAGE AND SHOW DASHBOARD
this.props.onSuccess();

这是使登录页面组件重新呈现并显示仪表板页面所需要做的一切。

This is all that you need to do to make the Login page component to rerender and show the dashboard page.

希望这样的答案可以解决您的问题。

Hope so this answer will solve your problem.

这篇关于登录后渲染页面反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！