Erreur étrange de réaction lors de l'utilisation d'un composant avec le nom Array
ps-aux
J'ai deux composants React simples:
// Array.js
import React from 'react'
import PropTypes from 'prop-types'
const factor = 10
const Array = ({array}) =>
<div className="array">
{array.map(v => v * factor)
.map((h, i) => <Column key={i}
height={h}/>)}
</div>
const Column = ({height}) =>
<div className="column" style={{height: `${height}px`}}/>
Array.propTypes = {
array: PropTypes.array.isRequired
}
export default Array
et
// ArraySort.js
import React from 'react'
import Array from 'src/components/Array'
const array = [2, 4, 6, 7, 10, 7, 6, 1]
class ArraySort extends React.Component {
state = {array}
render() {
const {array} = this.state
console.log('array', array)
return <div className="array-sort">
<Array array={array}/>
</div>
}
}
export default ArraySort
Étrangement, lorsque j'essaye de rendre, ArraySortj'obtiens une erreur:
Array.js:7 Uncaught TypeError: Cannot read property 'map' of undefined
at Array (Array.js:7)
at new ArraySort (bundle.js:35363)
at constructClassInstance (react-dom.development.js:9760)
at updateClassComponent (react-dom.development.js:10215)
at beginWork (react-dom.development.js:10605)
at performUnitOfWork (react-dom.development.js:12573)
at workLoop (react-dom.development.js:12682)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
at invokeGuardedCallback (react-dom.development.js:1195)
Array @ Array.js:7
ArraySort @ bundle.js:35363
constructClassInstance @ react-dom.development.js:9760
updateClassComponent @ react-dom.development.js:10215
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
(anonymous) @ index.js:17
__webpack_require__ @ bootstrap d8c366268449b6de2a48:19
(anonymous) @ bundle.js:2545
__webpack_require__ @ bootstrap d8c366268449b6de2a48:19
(anonymous) @ bootstrap d8c366268449b6de2a48:62
(anonymous) @ bootstrap d8c366268449b6de2a48:62
react-dom.development.js:8305 The above error occurred in the <ArraySort> component:
in ArraySort
in div
in Router (created by BrowserRouter)
in BrowserRouter
Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at -----.
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
performWork @ react-dom.development.js:12825
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
(anonymous) @ index.js:17
__webpack_require__ @ bootstrap d8c366268449b6de2a48:19
(anonymous) @ bundle.js:2545
__webpack_require__ @ bootstrap d8c366268449b6de2a48:19
(anonymous) @ bootstrap d8c366268449b6de2a48:62
(anonymous) @ bootstrap d8c366268449b6de2a48:62
Array.js:7 Uncaught TypeError: Cannot read property 'map' of undefined
at Array (Array.js:7)
at new ArraySort (bundle.js:35363)
at constructClassInstance (react-dom.development.js:9760)
at updateClassComponent (react-dom.development.js:10215)
at beginWork (react-dom.development.js:10605)
at performUnitOfWork (react-dom.development.js:12573)
at workLoop (react-dom.development.js:12682)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
at invokeGuardedCallback (react-dom.development.js:1195)
Cela fonctionne si j'importe Array.jssous un nom différent ie ArrayComponent.
Les projets utilisent:
"dependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
Quelle pourrait en être la cause?
Sagiv bg
Array Est un nom prédéfini dans la javascriptlangue et son utilisation doit être évitée
Citation:
En plus des mots réservés ci-dessus, vous feriez mieux d'éviter les identificateurs suivants comme noms de variables JavaScript. Ce sont des noms prédéfinis d'objets, de méthodes ou de propriétés JavaScript dépendants de l'implémentation (et, sans doute, certains auraient dû être des mots réservés)
Je recommanderais également d'initier l'état dans le constructor.
Modifier
comme suivi de votre commentaire
Pourquoi recommandez-vous d'initialiser l'état dans le constructeur?
Parce que cette méthode fait partie du React.Component cycle de vie
Citation du DOCS :
Le constructeur est le bon endroit pour initialiser l'état. Pour ce faire, attribuez simplement un objet à this.