加載外部本地json到React和渲染

我有另一個反應新手問題，我想從外部本地文件加載一些json數據，稱爲intro.json但我得到錯誤default.map is not a function。關於我在這裏做錯的任何想法？加載外部本地json到React和渲染

我的數據是這樣的

{ 
    "company": "test", 
    "employees":[ 
    { 
      "firstName":"John", 
      "lastName":"Doe" 
    }, 
    { 
     "firstName":"Anna", 
     "lastName":"Smith" 
    } 
    ] 
}

我進口像這樣，我認爲可能的工作，因爲我在做其他地方，但沒有類似的外部文件的東西。

import React, {PropTypes} from 'react'; 
import data from './intro.json'; 

var dataList = data.map(function(dl, index) { 
    return (
     <li key={index}>{dl.company}</li> 
    ) 
}); 

....

來源

2016-07-20 Ash

使用json-loader和進口data將是一個對象實例： Object {company: "test", employees: Array[2]} 要遍歷與地圖：

Object.entries(data).map(([key,value])=> { 
    if (Array.isArray(value)) { 
    //return array value representation 
    ... 
    } else { 
    //return normal value representation 
    return (
     <div>{key} : {value}</div> 
    ); 
    } 
})

來源

2016-07-20 09:35:56 Igorsvee

謝謝，但我已經使用JSON-裝載機，我有它設置了我webpack配置，它不能解決我遇到的問題。 – Ash

因爲'data'表示一個對象而不是數組。例如，遍歷一個可以使用[Object.entries]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries）的對象，我會更新用代碼回答。 – Igorsvee

哦對！我明白了，ES2015不支持object.entries，但對嗎？ – Ash

加載外部本地json到React和渲染

回答

相關問題