Reactjs 反应-条件渲染工作不正常

我在这里添加的组件在登录后呈现。我所需要的只是在会话过期时重定向到登录。我的问题主要是内部渲染。成功登录后，页面将被重定向到主页，并将

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);

  }
}

从“React”导入React；
导入“/App.css”；
从“axios”导入axios；
从“react router dom”导入{Redirect}
导出默认类Home扩展React.Component{
_isMounted=错误；
建造师（道具）{
超级（道具）；
此.state={
成功：“，
消息：“”，
用户：“”，
饼干：“
}
}
componentDidMount（）{
这个。_isMounted=true；
axios.get（）http://localhost:8080/auth/login/success“，{withCredentials:true}）。然后（（res）=>{
控制台日志（res）；
设data=res.data；
如果（此项已安装）{
这是我的国家({
成功：数据，成功，
message:data.message，
用户：data.user？data.user:“”，
cookies:data.cookies？data.cookies:“
})
}
}).catch（（错误）=>{
让data=err.response.data；
如果（此项已安装）
这是我的国家({
成功：数据，成功，
message:data.message，
用户：data.user？data.user:“”，
cookies:data.cookies？data.cookies:“
});
})
}
组件将卸载（）{
这个。_isMounted=false；
}
render（）{
//如果（此.状态.成功）
//返回{this.state.message}
//否则{
//返回
// }
返回{this.state.success.toString（）}
}
componentDidUpdate（previousProps，previousState）{
console.log（this.state）；
}
}

由于您进行了API调用且数据检索是异步的，因此在收到数据后，您必须维护一个加载指示器来处理您的逻辑，否则在初始渲染期间，

成功

状态将为false，并且由于正在渲染

重定向

组件，您的组件将被重定向

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);

  }
}

导出默认类Home.Component{
_isMounted=错误；
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
成功：“，
消息：“”，
用户：“”，
饼干：“
}
}
componentDidMount（）{
这个。_isMounted=true；
axios.get（）http://localhost:8080/auth/login/success“，{withCredentials:true}）。然后（（res）=>{
控制台日志（res）；
设data=res.data；
如果（此项已安装）{
这是我的国家({
孤岛加载：false，
成功：数据，成功，
message:data.message，
用户：data.user？data.user:“”，
cookies:data.cookies？data.cookies:“
})
}
}).catch（（错误）=>{
让data=err.response.data；
如果（此项已安装）
这是我的国家({
孤岛加载：false，
成功：数据，成功，
message:data.message，
用户：data.user？data.user:“”，
cookies:data.cookies？data.cookies:“
});
})
}
组件将卸载（）{
这个。_isMounted=false；
}
render（）{
如果（正在加载）返回加载。。。
如果（此.状态.成功）
返回{this.state.message}
否则{
回来
}
}
componentDidUpdate（previousProps，previousState）{
console.log（this.state）；
}
}

尝试将重定向逻辑存储在

componentDidMount

中，而不是

render