类型错误：无法读取反应组件中未定义的属性“映射”

Question

尝试从 .json 文件中获取 map。 不断收到类型错误：无法读取未定义的属性“地图”。 我试着像这里描述的那样定义它，但没有运气。

当我将 div 更改为时，我可以获得 JSON 数据显示在屏幕上

            <div className="search">
                <pre><code>{JSON.stringify(industryList, null, 4)}</code></pre>
            </div>

这是代码：

// @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": [
  {
    "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"
  }
]

Answer 1

随着你在那里命名事物的方式，这条线

{industryList.load.map( (industryList) => (

应该

{industryList.industryList.map( (industryList) => (

（但我建议将导入重命名为 industryList 以外的名称，因为这读起来很混乱）。

您还需要删除组件中的 industryList 道具，这会影响导入。 所以为了清楚起见，完整的正确文件有一些重命名：

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;