1
我似乎無法在代碼中觸發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"
}
確認您安裝的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