ErrorBoundary没有被componentDidMount中的错误触发

Question

我实现了这样的ErrorBoundary：

class ErrorBoundary extends React.Component {

    constructor(props) {
        super(props);
        this.state = { 
            hasError: false
        };
    }

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        alert("alert1");
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        // Display fallback UI
        alert("alert2");
        this.setState({ hasError: true });
    }

    render(){
        const { t } = this.props;
        if(this.state.hasError) {
            return(
                <div>
                    <Navbar t={t} />

                    <div id="error-container">
                        <h1 id="error-title">Error title</h1>           
                        <p id="error-status">Error 404</p>      
                        <p id="error-message">Error message</p>
                    </div>
                    <div id="link1-container">
                        <a href="%" id="error-link1">Volver</a>
                    </div>
                    <div id="link2-container">
                    <a href="%" id="error-link1">Volver2</a>
                    </div>  
                </div>
            );
        } 
        return this.props.children;
    }

}

export default withTranslation()(ErrorBoundary);

我的想法是将其用作全局错误处理程序，因此在App.js中，我进行了以下操作：

function App() {
  return (

    <div className="App">
      <BrowserRouter>
        <Suspense fallback={(<div>Loading</div>)}>
        <ErrorBoundary>
          <Route path="/publication" component={Details} />
        </ErrorBoundary>
        </Suspense>
    </BrowserRouter>
    </div>

  );
}

export default App;

然后我想尝试一下以在我的Details.js页面上捕获错误。我确实在第51行（在componentDidMount内部）收到错误“未处理的拒绝（TypeError）：无法读取未定义的属性'publicationID'”，并且我想显示我的ErrorBoundary而不是该错误。

class Details extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            publicationID: null,
            province: null,
            city: null,
            neighborhood: null,
            address: null,
            bedrooms: null,
            bathrooms: null,
            floorSize: null,
            parking: null,
            price: null,
            title: null,
            description: null,
            image: null,
            maxImages: null,
            ownerEmail: null,
            phoneNumber: null
        }
    }

    componentDidMount(){
        const queryString = require('query-string');
        const query = queryString.parse(this.props.location.search)
        const component = this

            axiosRequest.getPublication(query.publicationID).then(function (pub){
                axiosRequest.getImage(query.publicationID,0,pub).then(function (img){
                    component.setState({
                        publicationID: pub.publicationID, //this is line 51
                        province: pub.provinceID,
                        city: pub.cityID,
                        neighborhood: pub.neighborhoodID,
                        address: pub.address,
                        bedrooms: pub.bedrooms,
                        bathrooms: pub.bathrooms,
                        floorSize: pub.dimention,
                        parking: pub.parking,
                        price: pub.price,
                        title: pub.title,
                        description: pub.description,
                        image: img,
                        maxImages: pub.images,
                        phoneNumber: pub.phoneNumber,
                        ownerEmail: pub.userEmail
                    })
                })
            })

    }

    render(){
    ...