マウントされたコンポーネントまたはマウントされているコンポーネントのエラーのみを更新できます。条件付きレンダリング

Question

私は、componentDidMountイベントで開始されたユーザーのID番号を取得する非同期要求が行われるプロファイルページにユーザーを導くログインページを持っています。結果が戻ったら、取得したデータでIDにsetStateを設定します。

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が適切なログインauthentication.Thatから取得されたかどうかに基づいて、条件付きのレンダリングを使用すると、

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

に気付いた場合、彼らはメールアドレスとパスワードを指定しない場合、これは、ログインページに戻って、ユーザーをリダイレクトする理由です試してみました。データを受信した後にプロファイルコンポーネントのマウントとアンマウントを確認しようとしましたが、エラーメッセージが表示されたままです。 マウントされたコンポーネントまたはマウントされているコンポーネントのみをアップデートできます。コンポーネントがアンマウントすると混乱します。

Answer 1

方法は、通常のローディングインジケータが使用されている、あなたの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 2

あなたはコンポーネントがthis._isunmountedでマウントまたはアンマウントされているかどうかを確認したい場合は、componentWillUnmountでそれが本当行う必要があります。

componentWillUnmount() { 
    this._isunmounted = true; 
}