Question

我具有登录页面组件，并且想要在成功登录后重新呈现页面。
我的 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，但我不想这样做。我想重新渲染页面而不刷新。我该怎么做？

Answer 1

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

您可以将道具从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();

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

希望如此，此答案将解决您的问题。

登录后重新显示页面

1 个答案: