component: remove axios interceptor with componentWillUnmount lifecycle
This commit is contained in:
		
							parent
							
								
									4a1226e765
								
							
						
					
					
						commit
						5c769c261b
					
				
							
								
								
									
										11
									
								
								src/App.js
									
									
									
									
									
								
							
							
						
						
									
										11
									
								
								src/App.js
									
									
									
									
									
								
							@ -4,11 +4,20 @@ import Layout from './hoc/Layout/Layout';
 | 
				
			|||||||
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
 | 
					import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
class App extends Component {
 | 
					class App extends Component {
 | 
				
			||||||
 | 
					  state = {
 | 
				
			||||||
 | 
					    show: true
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  componentDidMount() {
 | 
				
			||||||
 | 
					    setTimeout(() => {
 | 
				
			||||||
 | 
					      this.setState({show: false});
 | 
				
			||||||
 | 
					    }, 3000);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
  render() {
 | 
					  render() {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div>
 | 
					      <div>
 | 
				
			||||||
        <Layout>
 | 
					        <Layout>
 | 
				
			||||||
          <BurgerBuilder />          
 | 
					          {this.state.show ? <BurgerBuilder /> : null }         
 | 
				
			||||||
        </Layout>
 | 
					        </Layout>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
 | 
				
			|||||||
@ -10,16 +10,22 @@ const withErrorHandler = (WrappedComponent, axios) => {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        componentWillMount() {  // This will happen before child component rendering
 | 
					        componentWillMount() {  // This will happen before child component rendering
 | 
				
			||||||
            axios.interceptors.request.use(req => {
 | 
					            this.reqInterceptor = axios.interceptors.request.use(req => {
 | 
				
			||||||
                this.setState({ error: null });
 | 
					                this.setState({ error: null });
 | 
				
			||||||
                return req;
 | 
					                return req;
 | 
				
			||||||
            });
 | 
					            });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            axios.interceptors.response.use(res => res, error => {
 | 
					            this.resInterceptor = axios.interceptors.response.use(res => res, error => {
 | 
				
			||||||
                this.setState({ error: error });
 | 
					                this.setState({ error: error });
 | 
				
			||||||
            });
 | 
					            });
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        componentWillUnmount() {
 | 
				
			||||||
 | 
					            console.log('Will Unmount', this.reqInterceptor, this.resInterceptor);
 | 
				
			||||||
 | 
					            axios.interceptors.request.eject(this.reqInterceptor);
 | 
				
			||||||
 | 
					            axios.interceptors.response.eject(this.resInterceptor);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        errorConfirmedHandler = () => {
 | 
					        errorConfirmedHandler = () => {
 | 
				
			||||||
            this.setState({ error: null });
 | 
					            this.setState({ error: null });
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user