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';
 | 
			
		||||
 | 
			
		||||
class App extends Component {
 | 
			
		||||
  state = {
 | 
			
		||||
    show: true
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  componentDidMount() {
 | 
			
		||||
    setTimeout(() => {
 | 
			
		||||
      this.setState({show: false});
 | 
			
		||||
    }, 3000);
 | 
			
		||||
  }
 | 
			
		||||
  render() {
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
        <Layout>
 | 
			
		||||
          <BurgerBuilder />          
 | 
			
		||||
          {this.state.show ? <BurgerBuilder /> : null }         
 | 
			
		||||
        </Layout>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
@ -10,16 +10,22 @@ const withErrorHandler = (WrappedComponent, axios) => {
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        componentWillMount() {  // This will happen before child component rendering
 | 
			
		||||
            axios.interceptors.request.use(req => {
 | 
			
		||||
            this.reqInterceptor = axios.interceptors.request.use(req => {
 | 
			
		||||
                this.setState({ error: null });
 | 
			
		||||
                return req;
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            axios.interceptors.response.use(res => res, error => {
 | 
			
		||||
            this.resInterceptor = axios.interceptors.response.use(res => res, 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 = () => {
 | 
			
		||||
            this.setState({ error: null });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user