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…
Reference in New Issue
Block a user