javascript - Strange React error when using a component with name Array

I have two simple React ponents:

// 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

and

// ArraySort.js

import React from 'react'
import Array from 'src/ponents/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

Strangely when I try to render ArraySort I get an error:

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> ponent:
    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)

This works if I import Array.js under a different name i.e. ArrayComponent.

The projects uses:

  "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"
  }

What might be the cause of this ?

I have two simple React ponents:

// 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

and

// ArraySort.js

import React from 'react'
import Array from 'src/ponents/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

Strangely when I try to render ArraySort I get an error:

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> ponent:
    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)

This works if I import Array.js under a different name i.e. ArrayComponent.

The projects uses:

  "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"
  }

What might be the cause of this ?

Share Improve this question edited Aug 18, 2019 at 12:37 Sagiv b.g 31k10 gold badges72 silver badges104 bronze badges asked Oct 29, 2017 at 19:38 ps-aux 12.2k26 gold badges85 silver badges136 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Array Is a predefined name in the javascript language and its usage should be avoided

Quote:

In addition to the above reserved words, you'd better avoid the following identifiers as names of JavaScript variables. These are predefined names of implementation-dependent JavaScript objects, methods, or properties (and, arguably, some should have been reserved words)

I would also remend initiate the state inside the constructor.

Edit
As a followup to your ment

Why do you remend initializing state inside constructor?

Because this method is part of the React.Component life cycle

Quote from the DOCS:

The constructor is the right place to initialize state. To do so, just assign an object to this.state

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Strange React error when using a component with name Array - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)