1

因此，我有一个登录页面，可将用户定向到配置文件页面，在该页面中发出异步请求，检索在 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;

我正在努力做到这一点，以便某人不能只在 url 中键入“/profile”路径并被带到个人资料页面。为此，我尝试根据是否从正确的登录身份验证中检索到 id 进行条件渲染。这就是为什么如果您注意到

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

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

4

3 回答 3

1

如果你想通过this._isunmounted检查组件是挂载还是卸载，你应该在componentWillUnmount中设置为 true 。

componentWillUnmount() {
   this._isunmounted = true;
}
于 2017-11-20T15:52:23.963 回答
0

我已成功删除错误消息：“只能更新已安装或已安装的组件”，方法是使用 window.location.replace()。

render() {
   window.location.replace(`/profile`); // This is how to redirect 
   return (null);
}
于 2018-04-17T23:19:04.493 回答
0

render 方法正在解析，因此在您的 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;
于 2017-11-20T16:06:21.360 回答