Replacing componentWillMount() with constructor does not work

Question

A class is used to intercept axios error. to bind arrow functions, componentDidMount() is being used. now I need to initiliaze data from the server so I have to use componentWillMount() except it will be removed in React 17 and warning message suggest I use constructor. When I do it gives me an error.

import React, {Component} from "react";

import Modal from "../../components/UI/Modal/Modal";
import Aux from "../Auxiliary/Auxiliary";

const withErrorHandler = (WrappedComponent, axios) => {
    return class extends Component{
        state = {
            error: null
        };

        // componentWillMount() {
        //  axios.interceptors.request.use(request => {
        //      this.setState({
        //          error: null
        //      });
        //      return request;
        //  });
        //  axios.interceptors.response.use(res => res, (error) => {
        //      this.setState({
        //          error: error
        //      })
        //  });
        // }

        constructor(props) {
            super(props);
            axios.interceptors.request.use(request => {
                this.setState({
                    error: null
                });
                return request;
            });
            axios.interceptors.response.use(res => res, (error) => {
                this.setState({
                    error: error
                })
            });
        }



        errorConfirmedHandler = () => {
            this.setState({error: null})
        };

        render() {
            return (
                <Aux>
                    <Modal show={this.state.error} modalClosed = {this.errorConfirmedHandler}>
                        {this.state.error ? this.state.error.message : null}
                    </Modal>
                    <WrappedComponent {...this.props}></WrappedComponent>
                </Aux>
            );
        }
    }
};

export default withErrorHandler;

I removed .json from URL to produce an error

class BurgerBuilder extends Component {
    state = {
        ingredients: null,
        totalPrice: 4,
        purchasable: false,
        purchasing: false,
        loading: false,
        // axiosError: null
    };

    componentDidMount() {
        axios.get('https://burger-m.firebaseio.com/ingredients').then(response => {
            this.setState({ingredients: response.data});
        }).catch(error => {});
    }
..
export default withErrorHandler(BurgerBuilder, axios);

&

Error Message: "index.js:1 Warning: Can't call setState on a component that
 is not yet mounted. This is a no-op, but it might indicate a bug in your 
application. Instead, assign to `this.state` directly or define a `state = {};` 
class property with the desired state in the _temp component."

componentWillMount() does work however. so What Should I change?

Answer 1

Keep constructor simple by just adding state and do not register axios interceptors in constructor method, instead register interceptors in render method.

 componentWillUnmount(){
        console.log('unregistering interceptors', this.reqInterceptor, this.resInterceptor)
        axios.interceptors.request.eject(this.reqInterceptor);
        axios.interceptors.response.eject(this.resInterceptor);
    }

render() {
        if(!this.resInterceptor){
            console.log('Registering Interceptors');
            this.reqInterceptor = axios.interceptors.request.use(req => {
                this.setState({ error: null })
                return req;
            })
            this.resInterceptor = axios.interceptors.response.use(response => response, error => {
                this.setState({error})
            })
        }

return (
            <Aux>
                <Modal show={this.state.error} modalClosed={this.errorConfirmedHandler }>{this.state.error ? this.state.error.message : null}</Modal>
                <WrappedComponent />
            </Aux>
        )