ComponentDidCatch wird nicht ausgelöst, auch wenn ich einen Fehler in meinem Konstruktor

Question

senden

Ich kann nicht scheinen, ComponentDidCatch in meinem Code auszulösen, obwohl ich absichtlich einen Fehler innerhalb meiner Konstruktorfunktion, so dass ich weiß, dass ich nicht werfen bin der Fehler bei einem Ereignishandler. Meine Sorge ist, dass ich mein Projekt nicht erfolgreich auf React 16 aktualisiert habe, weshalb componentDidCatch nicht funktioniert. Könnte es sein, dass ich nicht erfolgreich auf React 16 aktualisiert habe, oder verwende ich Fehlergrenzen?

Hier sind Beiträge Ich habe bereits überprüft und verwendet so weit zu kommen:

1. Error handling in React best practices

2. React 16 Error Boundary component (using componentDidCatch) shows uncaught error

3. Introducing Error Boundaries

App.js

import React, { Component } from 'react' 
import axios from 'axios' 

import ErrorBoundary from './components/ErrorBoundary' 
import Home from './components/Home' 
import Login from './components/Login' 

class App extends Component { 
    constructor (props) { 
    super(props) 

    this.state = { 
     loggedIn: false, 
     hasError: false 
    } 
    // This is where I am throwing my Error 
    throw new Error('this should be caught') 
    } 

    componentWillMount() { 
    axios.get(this.url, { 
     withCredentials: true 
    }) 
    .then((response) => { 
     if (response.status === 200) { 
     if (response.data.isAuthenticated) { 
      this.setState({ loggedIn: true }) 
     } else if (!response.data.isAuthenticated) { 
      this.setState({ loggedIn: false }) 
     } 
     } 
    }) 
    .catch((error) => { 
     this.setState(state => ({ ...state, hasErrors: true })) 
     throw new Error("We couldn't get a response from the server.") 
    }) 
    } 

    render() { 
    if (!this.state.loggedIn && !this.state.hasErrors) { 
     return (
     <div className='login-container'> 
      // I am setting an Error Boundary 
      <ErrorBoundary> 
      <Login url={this.url} /> 
      </ErrorBoundary> 
     </div> 
    ) 
    } else if (this.state.loggedIn && !this.state.hasErrors) { 
     return (
     <div> 
      // I am setting an Error Boundary 
      <ErrorBoundary> 
      <Home url={this.url} /> 
      </ErrorBoundary> 
     </div> 
    ) 
    } else { 
     return <h1>Something has gone wrong.</h1> 
    } 
    } 
} 

export default App 

ErrorBoundary.js

import React, { Component } from 'react' 

class ErrorBoundary extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { hasError: false } 
    } 

    componentDidCatch (error, info) { 
    this.setState(state => ({ ...state, hasError: true })) 
    } 

    render() { 
    if (this.state.hasError) { 
     return <h1>Something went wrong.</h1> 
    } 
    return this.props.children 
    } 
} 

export default ErrorBoundary 

package.json

{ 
    "name": "spotify-analyzer-frontend", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "babel-eslint": "^7.2.3", 
    "dotenv": "^4.0.0", 
    "flexbox-react": "^4.4.0", 
    "highcharts": "^5.0.14", 
    "material-ui-search-bar": "^0.4.0", 
    "prop-types": "^15.6.0", 
    "react": "^16.1.1", 
    "react-dom": "^16.1.1", 
    "react-flexbox-grid": "^2.0.0", 
    "react-highcharts": "^12.0.0", 
    "react-jss": "^8.0.0", 
    "react-scripts": "1.0.11", 
    "react-tap-event-plugin": "^2.0.1", 
    "standard": "^10.0.3" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    }, 
    "proxy": "https://spotify-viz-api.herokuapp.com", 
    "devDependencies": { 
    "axios": "^0.16.2", 
    "babel-eslint": "^8.0.2", 
    "babel-jest": "^21.0.0", 
    "css.escape": "^1.5.1", 
    "enzyme": "^3.2.0", 
    "enzyme-adapter-react-16": "^1.1.0", 
    "eslint": "^4.5.0", 
    "eslint-plugin-react": "^7.3.0", 
    "jest": "^21.0.1", 
    "material-ui": "^0.19.1", 
    "regenerator-runtime": "^0.11.0", 
    "standard": "^10.0.3" 
    }, 
    "standard": { 
    "ignore": [ 
     "__tests__/**.test.js" 
    ] 
    } 
} 

node_modules/reagieren/package.json

{ 
    "_args": [ 
    [ 
     { 
     "raw": "react@next", 
     "scope": null, 
     "escapedName": "react", 
     "name": "react", 
     "rawSpec": "next", 
     "spec": "next", 
     "type": "tag" 
     }, 
     "/Users/maecapozzi/Desktop/Codes/spotify-analyzer-frontend" 
    ] 
    ], 
    "_from": "react@next", 
    "_id": "react@16.1.1", 
    "_inCache": true, 
    "_location": "/react", 
    "_nodeVersion": "8.6.0", 
    "_npmOperationalInternal": { 
    "host": "s3://npm-registry-packages", 
    "tmp": "tmp/react-16.1.1.tgz_1510589592482_0.18714527692645788" 
    }, 
    "_npmUser": { 
    "name": "gaearon", 
    "email": "dan.abramov@gmail.com" 
    }, 
    "_npmVersion": "5.5.1", 
    "_phantomChildren": {}, 
    "_requested": { 
    "raw": "react@next", 
    "scope": null, 
    "escapedName": "react", 
    "name": "react", 
    "rawSpec": "next", 
    "spec": "next", 
    "type": "tag" 
    }, 
    "_requiredBy": [ 
    "#USER", 
    "/" 
    ], 
    "_resolved": "https://registry.npmjs.org/react/-/react-16.1.1.tgz", 
    "_shasum": "d5c4ef795507e3012282dd51261ff9c0e824fe1f", 
    "_shrinkwrap": null, 
    "_spec": "react@next", 
    "_where": "/Users/maecapozzi/Desktop/Codes/spotify-analyzer-frontend", 
    "browserify": { 
    "transform": [ 
     "loose-envify" 
    ] 
    }, 
    "bugs": { 
    "url": "https://github.com/facebook/react/issues" 
    }, 
    "dependencies": { 
    "fbjs": "^0.8.16", 
    "loose-envify": "^1.1.0", 
    "object-assign": "^4.1.1", 
    "prop-types": "^15.6.0" 
    }, 
    "description": "React is a JavaScript library for building user interfaces.", 
    "devDependencies": {}, 
    "directories": {}, 
    "dist": { 
    "integrity": "sha512-FQfiFfk2z2Fk87OngNJHT05KyC9DOVn8LPeB7ZX+9u5+yU1JK6o5ozRlU3PeOMr0IFkWNvgn9jU8/IhRxR1F0g==", 
    "shasum": "d5c4ef795507e3012282dd51261ff9c0e824fe1f", 
    "tarball": "https://registry.npmjs.org/react/-/react-16.1.1.tgz" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    }, 
    "files": [ 
    "LICENSE", 
    "README.md", 
    "index.js", 
    "cjs/", 
    "umd/" 
    ], 
    "homepage": "https://reactjs.org/", 
    "keywords": [ 
    "react" 
    ], 
    "license": "MIT", 
    "main": "index.js", 
    "maintainers": [ 
    { 
     "name": "acdlite", 
     "email": "acdlite@me.com" 
    }, 
    { 
     "name": "sophiebits", 
     "email": "npm@sophiebits.com" 
    }, 
    { 
     "name": "flarnie", 
     "email": "flarnie.npm@gmail.com" 
    }, 
    { 
     "name": "gaearon", 
     "email": "dan.abramov@gmail.com" 
    }, 
    { 
     "name": "trueadm", 
     "email": "dg@domgan.com" 
    }, 
    { 
     "name": "brianvaughn", 
     "email": "briandavidvaughn@gmail.com" 
    }, 
    { 
     "name": "fb", 
     "email": "opensource+npm@fb.com" 
    } 
    ], 
    "name": "react", 
    "optionalDependencies": {}, 
    "readme": "ERROR: No README data found!", 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/facebook/react.git" 
    }, 
    "version": "16.1.1" 
} 

Answer 1

wie Sie also aus dem Code sieht es aus‘ Er wirft den Fehler in den Eltern.

Fehlergrenzen sind Reagieren Komponenten, die JavaScript-Fehler irgendwo in ihrem Kind Komponentenbaum, melden Sie diese Fehler und zeigen eine Ausweich UI

Fehlergrenzen fangen Fehler in ihren Kind Komponentenbaum fangen.

Sie müssen also Fehler in Ihren <Home> oder <Login> Komponenten haben.