时间戳

首页 > 解决方案 > 登录后重新渲染页面反应

reactjs - 登录后重新渲染页面反应

问题描述

我有登录页面组件，我想在成功登录后重新呈现页面。
我的App.js文件：

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 是：

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 但我不想这样做。我想要重新渲染页面而不刷新。我该怎么做？

标签： reactjsreact-routercreate-react-app

解决方案

您可以做到这一点的方法之一是借助回调函数。

您可以将 App.js 中的道具传递给 Login.js，然后一旦 API 返回登录状态，您就可以调用该回调道具函数，您只需更改 loginStatus 的状态。

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

在 App.js 中

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

在 Login.js 中

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

这就是使登录页面组件重新呈现和显示仪表板页面所需要做的所有事情。

希望这个答案能解决您的问题。

推荐阅读