componentDidCatch即使在我的构造函数中抛出一个错误时也不会被触发
问题描述:
我似乎无法在代码中触发componentDidCatch,即使我故意在构造函数中抛出一个错误,所以我知道我不会抛出事件处理程序的错误。我担心的是,我没有成功地将我的项目更新到React 16,这就是为什么componentDidCatch不起作用。难道我没有成功升级到React 16,还是我误用了Error Boundaries?componentDidCatch即使在我的构造函数中抛出一个错误时也不会被触发
下面是帖子我已经审核并用来走到这一步:
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 /反应/的package.json
{
"_args": [
[
{
"raw": "[email protected]",
"scope": null,
"escapedName": "react",
"name": "react",
"rawSpec": "next",
"spec": "next",
"type": "tag"
},
"/Users/maecapozzi/Desktop/Codes/spotify-analyzer-frontend"
]
],
"_from": "[email protected]",
"_id": "[email protected]",
"_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": "[email protected]"
},
"_npmVersion": "5.5.1",
"_phantomChildren": {},
"_requested": {
"raw": "[email protected]",
"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": "[email protected]",
"_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": "[email protected]"
},
{
"name": "sophiebits",
"email": "[email protected]"
},
{
"name": "flarnie",
"email": "[email protected]"
},
{
"name": "gaearon",
"email": "[email protected]"
},
{
"name": "trueadm",
"email": "[email protected]"
},
{
"name": "brianvaughn",
"email": "[email protected]"
},
{
"name": "fb",
"email": "[email protected]"
}
],
"name": "react",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/facebook/react.git"
},
"version": "16.1.1"
}
答
所以从您的代码,它看起来像你”重新把错误抛到父类中。
错误边界作出反应的是赶上JavaScript错误在他们的孩子组件树随地组件,记录这些错误,并显示一个备用的UI
错误边界赶在他们孩子组件树错误。
因此,您需要在您的<Home>
或<Login>
组件中发生错误。
确认您安装的React版本是个好主意。检查项目中的package-lock.json文件并搜索“反应”。或直接在'node_modules/react'文件夹中检查并检查反应的'package.json'。 – Sidney
嗨@Sidney,我已经添加了我的node_modules/react/package.json文件,如果你不介意看看。它似乎说我有[email protected]。 – maecapozzi
您可以通过从'render'返回一个简单的字符串来测试您是否已成功升级到16.x,直到16时才支持该字符串https://gist.github.com/ahmedtehseen/21351c45c0a719372bad5c8f548d508f#file-fragmentstring-js – Noel