Javascript 如何映射外部JSON数据？

我已经将JSON数据保存为

profiledata.js

文件。我想映射每个对象并在页面上显示它。我知道

.map（）。因此，我创建了对象数组，但仍然无法使用
.map（）
在页面上显示数据

profiledata.js：

const profiledata = [  {
        "_id": {
          "_str": "5b0761dc88430400064d9a31"
        },
        "batting": {
          "_id": {
            "_str": "54cc1859ce17393ab3219eda"
          },
          "avgRate": 43,
          "centuries": 0,
          "halfCenturies": 0,
          "highestScore": 43,
          "notOut": 0,
          "numInnings": 1,
          "numMatches": 1,
          "strikeRate": null,
          "teamid": {
            "_str": "54cc196cce17393ab321a9e6"
          },
          "totalBalls": 18,
          "totalFours": 2,
          "totalPoints": 78,
          "totalRuns": 43,
          "totalSixes": 5
        },
        "bowling": {
          "_id": {
            "_str": "54cc1859ce17393ab3219eda"
          },
          "bestInnings": {
            "runs": 39,
            "wickets": 0
          },
          "numMatches": 1,
          "runRate": 6.5,
          "totalBalls": 0,
          "totalMaidens": 0,
          "totalNoBalls": 1,
          "totalOvers": 6,
          "totalPoints": 5,
          "totalRuns": 39,
          "totalWickets": 0,
          "totalWides": 0
        },
        "division": "A",
        "fielding": [],
        "matches": 1,
        "player": {
          "_str": "54cc1859ce17393ab3219eda"
        },
        "points": 83,
        "season": "2018",
        "team": {
          "_str": "54cc196cce17393ab321a9e6"
        },
        "tournament": {
          "_str": "f4e8a58fd0d90574856d1a46"
        },
        "tournamentString": "f4e8a58fd0d90574856d1a46"
      },
    {},
    {},
    ....
    ];

    export default profiledata;

chart.js：

import React, { Component } from 'react';
import profiledata from './profiledata';


class Chart extends Component {

  render(){
    return(
      <div>
          {profiledata.map( newdata => {
            return(
              <div>
            <li> {newdata._id}</li>
              </div>
            );
          })}

      </div>
    )}

}

export default Chart;

import React，{Component}来自'React'；
从“/profiledata”导入profiledata；
类图扩展组件{
render（）{
返回(
{profiledata.map（newdata=>{
返回(
{newdata.\u id}
);
})}
)}
}
导出默认图表；

我正在尝试使用
.map（）
显示每个对象的
\u id
。我正在将
profiledata
导入名为
chart.js
的组件中。检查屏幕截图：
您正在调用newdata.\u id when.\u id是一个包含“\u str”的对象，这是您想要的

试试看

您正在调用newdata.\u id，当.\u id是一个包含“\u str”的对象时，它就是您想要的

试试看

输入配置文件数据时添加.js。
更换这条线

import profiledata from './profiledata';

到

输入配置文件数据时添加.js。
更换这条线

import profiledata from './profiledata';

到

你用过吗webpack@ShubhamBatra我使用了
create react app
@ShubhamBatra，但不存在此类文件。请尝试控制台打印
profiledata
。在渲染函数中是否按预期获取数据。这意味着数据出现问题。我不确定确切的问题是什么，但可能是我们导入了错误的文件或空文件，或者是
profiledata
中出现了错误。您使用过吗webpack@ShubhamBatra我使用了
create react app
@ShubhamBatra，但不存在此类文件。请尝试控制台打印
profiledata
。在渲染函数中是否按预期获取数据。这意味着数据出现问题。我不确定确切的问题是什么，但可能是我们导入了错误的文件或空文件，或者当我不导入profiledata时，
profiledata
中出现了错误，即将chart.js和profiledata.js合并到it console.log中，所以我认为问题在于导入。是的，问题在于导入。上述解决方案对您有效吗？不，您不需要在我导出时添加
.js
。我已经想出了解决办法。只是删除了该文件，创建了一个新的json文件，然后导入。@stonerock很高兴你找到了解决方案。当我不导入profiledata时，即合并chart.js和profiledata.js，它会将数据记录下来。所以我认为导入有问题。是的，导入有问题。上述解决方案对您有效吗？不，您不需要在我导出时添加
.js
。我已经想出了解决办法。只需删除该文件并创建一个新的json文件，然后导入即可。@stonerock很高兴您找到了解决方案。
import profiledata from './profiledata.js';