时间戳

首页 > 解决方案 > React - 条件渲染效果不佳

reactjs - React - 条件渲染效果不佳

问题描述

我在此处添加的组件在登录后呈现。我只需要在会话过期时重定向到登录。我的问题主要在渲染内部。成功登录后，页面将被重定向到主页，this.state.success.toString()如果会话已过期，则显示为 true 和 false。到这，就好了。当我取消注释我留下注释的行并注释掉最后一行时，渲染功能是在主页中显示一条消息或重定向到登录。但是代码不是这样工作的。它转到 Home 路由并再次被重定向到 Login。甚至该componentDidUpdate()方法也没有被调用。我不明白为什么。你能帮忙解决这个问题吗？

import React from 'react';
import './App.css';
import axios from 'axios';
import { Redirect } from 'react-router-dom'

export default class Home extends React.Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      success: "",
      message: "",
      user: "",
      cookies: ""
    }
  }
  componentDidMount() {
    this._isMounted = true;
    axios.get('http://localhost:8080/auth/login/success', { withCredentials: true }).then((res) => {
      console.log(res);
      let data = res.data;
      if (this._isMounted) {
        this.setState({
          success: data.success,
          message: data.message,
          user: data.user ? data.user : "",
          cookies: data.cookies ? data.cookies : ""
        })
      }
    }).catch((err) => {
      let data = err.response.data;
      if (this._isMounted)
        this.setState({
          success: data.success,
          message: data.message,
          user: data.user ? data.user : "",
          cookies: data.cookies ? data.cookies : ""
        });
    })
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
  render() {
    // if (this.state.success)
    //   return <h1>{this.state.message}</h1>
    // else {
    //   return <Redirect to="/login"></Redirect>
    // }
    return <h1>{this.state.success.toString()}</h1>

  }
  componentDidUpdate(previousProps, previousState) {
    console.log(this.state);

  }
}

标签： reactjs

解决方案

由于您进行 API 调用并且数据检索是异步的，因此一旦接收到数据，您必须维护一个加载指示器来处理您的逻辑，否则在初始渲染期间，success状态将为 false，并且您的组件将由于Redirect正在渲染的组件而被重定向

export default class Home extends React.Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      success: "",
      message: "",
      user: "",
      cookies: ""
    }
  }
  componentDidMount() {
    this._isMounted = true;
    axios.get('http://localhost:8080/auth/login/success', { withCredentials: true }).then((res) => {
      console.log(res);
      let data = res.data;
      if (this._isMounted) {
        this.setState({
          isLoading: false,
          success: data.success,
          message: data.message,
          user: data.user ? data.user : "",
          cookies: data.cookies ? data.cookies : ""
        })
      }
    }).catch((err) => {
      let data = err.response.data;
      if (this._isMounted)
        this.setState({
          isLoading: false,
          success: data.success,
          message: data.message,
          user: data.user ? data.user : "",
          cookies: data.cookies ? data.cookies : ""
        });
    })
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
  render() {
    if(isLoading) return <div>Loading...</div>

     if (this.state.success)
       return <h1>{this.state.message}</h1>
     else {
       return <Redirect to="/login"></Redirect>
     }

  }
  componentDidUpdate(previousProps, previousState) {
    console.log(this.state);

  }
}

推荐阅读