Question

所以我有一个登录页面，它将用户引导到一个配置文件页面，在该配置文件页面中发出异步请求，检索在componentDidMount事件中启动的用户ID号。一旦我得到了结果，我就在id上检查了数据，并检索了数据。

import React, { Component } from 'react';
import {Navbar} from 'react-materialize';
import {Link, Redirect} from 'react-router-dom';
import helper from '../utils/helper';
import axios from 'axios';
import logo from '../logo.svg';
import '../App.css';

class Profile extends Component {
  constructor(props){
    super(props);
    this.state = {id: null, loggedIn: true};
       this.logOut = this.logOut.bind(this);

  }

  componentDidMount(){
    axios.get('/profile').then((results) => {
      if(!this._unmounted) {
        this.setState({id: results.data})
      }      
    })
  }

  logOut(event){
    axios.post('/logout').then((results) => {
      console.log(results);
    })
    this.setState({loggedIn: false});
  }

  render() {
    if(!this.state.loggedIn){
      return <Redirect to={{pathname: "/"}}/>
    }
    if(this.state.id == null){
      return <Redirect to={{pathname: "/login"}} ref="MyRef" />
    }

    return (
      <div>
        <Navbar brand='WorldScoop 2.0' right>
          <ul>
            <li><Link to="#" onClick={this.logOut}>Logout</Link></li>   
          </ul>
        </Navbar>
        <h1>Profile Page</h1>
        <h2>Welcome {this.state.id} </h2>
      </div>
    )
  }
}
export default Profile;

我正努力让人们不能只输入＆＃39; /个人资料＆＃39;网址中的路径，并将其带到个人资料页面。为此，我尝试了基于是否从正确的登录身份验证中检索到id的条件呈现。这就是为什么如果你注意到

if(this.state.id == null){
  return <Redirect to={{pathname: "/login"}} ref="MyRef" />
}

如果用户不提供电子邮件和密码，则会将用户重定向回登录页面。我已经尝试确保我的配置文件组件在收到数据后安装和卸载，但我仍然收到错误消息：只能更新已安装或安装的组件。当组件“卸载”时，我很困惑。

Answer 1

如果您想检查 this._isunmounted 是否已安装或卸载组件，则应在 componentWillUnmount 中将其设为true。

componentWillUnmount() {
   this._isunmounted = true;
}

Answer 2

渲染方法正在解决，因此在你的axios调用完成之前重新路由你，因此解决方案是在你的调用完成之前不改变位置，通常使用加载指示符。此外，我将生命周期钩子从didMount更改为willMount，因此状态将在渲染之前反映。

import React, { Component } from 'react';
import {Navbar} from 'react-materialize';
import {Link, Redirect} from 'react-router-dom';
import helper from '../utils/helper';
import axios from 'axios';
import logo from '../logo.svg';
import '../App.css';

class Profile extends Component {
  constructor(props){
    super(props);
    this.state = {id: null, loggedIn: true, loading: false};
       this.logOut = this.logOut.bind(this);

  }

  componentWillMount(){
    this.setState({ loading: true });
    axios.get('/profile')
     .then((results) => {
         // usually data is an object so make sure results.data returns the ID
         this.setState({id: results.data, loading: false})
      })
     .catch(err => {
         this.setState({ loading: false, id: null })
      })
  }

  logOut(event){
    axios.post('/logout').then((results) => {
      console.log(results);
    })
    this.setState({loggedIn: false});
  }

  render() {
    if(!this.state.loggedIn){
      return <Redirect to={{pathname: "/"}}/>
    }
    if (this.state.loading) return <div>loading...</div>
    if(this.state.id == null){
      return <Redirect to={{pathname: "/login"}} ref="MyRef" />
    }

    return (
      <div>
        <Navbar brand='WorldScoop 2.0' right>
          <ul>
            <li><Link to="#" onClick={this.logOut}>Logout</Link></li>   
          </ul>
        </Navbar>
        <h1>Profile Page</h1>
        <h2>Welcome {this.state.id} </h2>
      </div>
    )
  }
}
export default Profile;

Answer 3

我已成功删除错误消息：＆＃39;只能更新已安装或安装的组件＆＃39;通过使用window.location.replace（）。

render() {
   window.location.replace(`/profile`); // This is how to redirect 
   return (null);
}

只能更新已安装或安装组件的错误。条件渲染

3 个答案: