Question

我对React非常陌生，请耐心等待。

我有一个带有条件渲染的主要组件。注销时，我调用handleLogout方法注销。这样做的目的是清除令牌，但不按ctrl + f5键就不会刷新我的页面。

我尝试在handleLogout中使用以下方法未成功：

this.ForceUpdate();
this.setState(this.state);
this.props.history.replace('/login');

代码：

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";
import LoginForm from './forms/LoginForm';
import RegisterForm from './forms/RegisterForm';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

import AuthService from './auth/AuthService';
import withAuth from './auth/withAuth';

const Auth = new AuthService();


class Main extends Component {

  handleLogout(){
    Auth.logout()
    //this.setState({shouldupdate: true});
    //alert(this.state);
    //this.ForceUpdate()
    //this.setState(this.state);
    //this.props.history.replace('/login');
  }


  render() {
    if(Auth.loggedIn()) {
      return (
        <HashRouter>
          <Container>
            <Row>
              <h1>Simple SPA</h1>
            </Row>
            <Row>
              <Col xs={2}>
                <ul className="header">
                  <li><NavLink to="/">Home</NavLink></li>
                  <li><NavLink to="/stuff">Stuff</NavLink></li>
                  <li><NavLink to="/contact">Contact</NavLink></li>
                  <li><NavLink to="/" onClick={this.handleLogout()}>Logout</NavLink></li>
                </ul>
              </Col>
              <Col>
                <Route exact path="/" component={Home}/>
                <Route path="/stuff" component={Stuff}/>
                <Route path="/contact" component={Contact}/>
                <Route path="/logout" component={LoginForm}/>
              </Col>
            </Row>
          </Container>
        </HashRouter>
      );
    } else {
      return (
        <HashRouter>
          <Container>
            <Row>
              <h1>Simple SPA</h1>
            </Row>
            <Row>
              <Col xs={2}>
                <ul className="header">
                  <li><NavLink to="/">Home</NavLink></li>
                  <li><NavLink to="/stuff">Stuff</NavLink></li>
                  <li><NavLink to="/register">Register</NavLink></li>
                  <li><NavLink to="/login">Login</NavLink></li>
                </ul>
              </Col>
              <Col>
                <Route exact path="/" component={Home}/>
                <Route path="/stuff" component={Stuff}/>
                <Route path="/contact" component={Contact}/>
                <Route path="/register" component={RegisterForm}/>
                <Route path="/login" component={LoginForm}/>
              </Col>
            </Row>
          </Container>
        </HashRouter>
      );
    }
  }
}

export default withAuth(Main);

更新的登录代码：

我的代码如下，用于通过将功能作为属性传递给子组件来更新登录状态。登录时，出现一个弹出窗口，指出this.props.setLoggedIn不是函数。

我的渲染功能有：

<Route path="/login" render={(props) => <LoginForm {...props} setLoggedIn={this.setLoggedin}/>}/>

setLoggedIn函数如下：

  setLoggedIn() {
    this.setState({loggedin: true});
  }

LoginForm类中使用此功能的登录函数如下：

  handleSubmit(event) {
   event.preventDefault();

    this.Auth.login(this.state.username,this.state.password)
    .then(res =>{
       this.props.setLoggedIn();
       this.props.history.push("/");
    })
    .catch(err =>{
        alert(err);
    })
  }

Answer 1

在用户注销更新值时，将登录状态保存为状态。

state = {
  isLoggedIn: false,
};

componentDidMount = () => {

  const isLoggedIn = Auth.loggedIn(); // check if user is logged in

    this.setState({
      isLoggedIn: isLoggedIn
    });
}

handleLogout = () => {
  Auth.logout();

  this.setState({
    isLoggedIn: false, // update login status
  })
}

在渲染中使用this.state.isLoggedIn

render() {
  if(this.state.isLoggedIn) {
    return (
      <HashRouter>
        <Container>
          <Row>
            <h1>Simple SPA</h1>
          </Row>
          <Row>
            <Col xs={2}>
              <ul className="header">
                <li><NavLink to="/">Home</NavLink></li>
                <li><NavLink to="/stuff">Stuff</NavLink></li>
                <li><NavLink to="/contact">Contact</NavLink></li>
                <li><NavLink to="/" onClick={this.handleLogout()}>Logout</NavLink></li>
              </ul>
            </Col>
            <Col>
              <Route exact path="/" component={Home}/>
              <Route path="/stuff" component={Stuff}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/logout" component={LoginForm}/>
            </Col>
          </Row>
        </Container>
      </HashRouter>
    );
  } else {
    return (
      <HashRouter>
        <Container>
          <Row>
            <h1>Simple SPA</h1>
          </Row>
          <Row>
            <Col xs={2}>
              <ul className="header">
                <li><NavLink to="/">Home</NavLink></li>
                <li><NavLink to="/stuff">Stuff</NavLink></li>
                <li><NavLink to="/register">Register</NavLink></li>
                <li><NavLink to="/login">Login</NavLink></li>
              </ul>
            </Col>
            <Col>
              <Route exact path="/" component={Home}/>
              <Route path="/stuff" component={Stuff}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/register" component={RegisterForm}/>
              <Route path="/login" component={LoginForm}/>
            </Col>
          </Row>
        </Container>
      </HashRouter>
    );
  }
}

Answer 2

首先在状态对象（如）中设置局部状态变量。

state = {shouldupdate:false};

根据安装时的auth设置您的shouldupdate变量。

componentDidMount = () => {
const shouldupdate = Auth.loggedIn(); // this wil check if user is logged in

this.setState({shouldupdate: shouldupdate}); // here we setting state a/c to auth on initial render
}

然后，不要在if块内使用AUTH.login（），而应使用状态变量shouldUpdate。
在您的登出功能内，设置状态如下所示。

 handleLogout(){
    Auth.logout()
    this.setState({shouldupdate: true});
    //alert(this.state);
    //this.ForceUpdate()
    //this.setState(this.state);
    //this.props.history.replace('/login');
  }

在内部渲染中，它像使用。

    render() {
    if(this.state.shouldupdate) {
      return (...)}
       else {
      }

仅当state发生变化时，React才重新渲染。看来您的AUTH.logout函数与状态没有任何关系

使用Ctrl + F5只能在React页面刷新中进行条件渲染

2 个答案: