[英]TypeError: Cannot read property 'map' of undefined in react component
Trying to map from a.json file.尝试从 .json 文件中获取 map。 Keep getting TypeError: Cannot read property 'map' of undefined.
不断收到类型错误:无法读取未定义的属性“地图”。 I tried to define it like described Here , but no luck.
我试着像这里描述的那样定义它,但没有运气。
I can get JSON data to display on the screen when I change div to当我将 div 更改为时,我可以获得 JSON 数据显示在屏幕上
<div className="search">
<pre><code>{JSON.stringify(industryList, null, 4)}</code></pre>
</div>
Here is the code:这是代码:
// @flow
import React from 'react';
import { Row, Col } from 'reactstrap';
import industryList from './industryList';
const AnalyticsDashboardPage = ({industryList = []}) => {
return (
<React.Fragment>
<div className="search">
{industryList.load.map( (industryList) => (
<div>
<h3>{industryList}</h3>
</div>
))};
</div>
</React.Fragment>
)};
export default AnalyticsDashboardPage;
industryList.json industryList.json
{
"industryList": [
{
"Industry": "Aerospace&Defense",
"icon": "mdi mdi-shield-airplane-outline"
},
{
"Industry": "Airlines",
"icon": "mdi mdi-airplane-takeoff"
},
{
"Industry": "AutoComponents",
"icon": "mdi mdi-engine"
},
{
"Industry": "Automobiles",
"icon": "mdi mdi-car-estate"
},
{
"Industry": "Banking",
"icon": "mdi mdi-bank-outline"
},
{
"Industry": "Building",
"icon": "uil-building"
}
]
With how you have things named there, the line随着你在那里命名事物的方式,这条线
{industryList.load.map( (industryList) => (
should be应该
{industryList.industryList.map( (industryList) => (
(but I'd suggesting renaming the import to be called something other than industryList, as that's confusing to read). (但我建议将导入重命名为 industryList 以外的名称,因为这读起来很混乱)。
You'd also need to delete the industryList prop in the component, that's shadowing the import.您还需要删除组件中的 industryList 道具,这会影响导入。 so the full correct file with some renames for clarity:
所以为了清楚起见,完整的正确文件有一些重命名:
import React from 'react';
import { Row, Col } from 'reactstrap';
import industryListData from './industryList';
const AnalyticsDashboardPage = () => {
return (
<React.Fragment>
<div className="search">
{industryListData.industryList.map( (industryListItem) => (
<div>
<h3>{industryListItem}</h3>
</div>
))};
</div>
</React.Fragment>
)};
export default AnalyticsDashboardPage;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.