類型錯誤：無法讀取反應組件中未定義的屬性“映射”

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;