如何访问Object数组文件到react组件？

Question

我试图访问src文件夹中的对象数组文件，例如：data.js（仅限对象数组）此文件到我的app.js（react组件）

在第一个场景1.我已经尝试使用react in这个问题

src - [app.js（component）/data.js（object array）]。

当我跑步时，它向我显示了一个错误

（TypeError：_data__WEBPACK_IMPORTED_MODULE_1___default.a.map不是函数）表示null数组/未定义。

在第二种情况下2.当我在同一页面中的app.js中添加对象数组时，它向我展示了完美的结果。没有错误，但尝试从另一个文件，如data.js它采取空数组我已经习惯了stringify()和JSON解析器，但没有结果

对象数组文件data.js - >

const datas=[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
    ];

反应组件app.js - >

import React from 'react';
import  datas from './data';
import  DataInfo from './DataInfo';
function App () {
 const appdata=datas.map( inner => inner.id + inner.firstname + inner.lastname)
//print on console
 console.log(appdata)
    return (
     <div className="App">
           <p>App js page</p>

              {appdata} 

      </div>
    )
  }
export default App;

错误 - >

TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map is not a function
  21 | return (  
  22 |   
  23 |   
> 24 |   <div className="App">  
     |  ^  25 |   
  26 |        <p>App js page</p>  

实际结果：- App js页面

1samparkar2juleefransic 并在控制台（2）[“1samparkar”，“2juleefransic”] 0：“1samparkar”1：“2juleefransic”

Answer 1

确保正确导出datas

export const datas=[
  {
    "id": "1",
    "firstname": "sam",
    "lastname": "parkar"
  },
  {
    "id": "2",
    "firstname": "julee",
    "lastname": "fransic"
  }
];

在app.js中调用它如下：

import  {datas} from './data';

Answer 2

您可以像这样使用JSON文件：

datas.json

[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
]

在app.js中：

import datas from './datas.json';

Answer 3

如果您使用的是JSON文件，则将该文件另存为datas.json

现在在你的app.js文件中使用<datas/>而不是{datas}。

在jsx属性中使用时，可以使用{datas}。例如-

<textarea name="JSON" value={datas} />。

但在你的情况下，你应该使用<datas />。