如何将对象数组文件访问到React组件中?

时间:2019-04-04 07:14:13

标签: javascript arrays reactjs ecmascript-5 webpack-4

我正在尝试访问src文件夹中的对象数组文件,例如:data.js(仅对象数组)此文件到我的app.js(反应组件)中

在第一种情况下,我已使用

中的react尝试了此问题
  

src-[app.js(component)/data.js(object array)]。

运行时,它向我显示

之类的错误
  

(TypeError:_data__WEBPACK_IMPORTED_MODULE_1___default.a.map不是函数)表示空数组/未定义。

在第二种情况下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>  

实际结果:-
应用js页面

  

1samparkar2juleefransic
  并在控制台上   (2)[“ 1samparkar”,“ 2juleefransic”]   0:“ 1samparkar”   1:“ 2juleefransic”

3 个答案:

答案 0 :(得分:0)

确保正确导出datas

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

在app.js中这样称呼它:

import  {datas} from './data';

答案 1 :(得分:0)

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

datas.json

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

在app.js中:

import datas from './datas.json';

答案 2 :(得分:0)

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

现在在您的app.js文件中,使用<datas/>代替{datas}

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

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

但对于您而言,您应该使用<datas />