마운트 된 또는 마운트 된 구성 요소 오류 만 업데이트 할 수 있습니다. 조건부 렌더링

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