开发者问题收集

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

2019-04-04
17517

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

在第一种情况下 1. 我已在

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

中使用 react 尝试解决此问题

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

运行时,它显示了类似

(TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map is not a function)means null array/undefined.

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

对象数组文件 data.js ->

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

react 组件 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
and on console (2) ["1samparkar", "2juleefransic"] 0: "1samparkar" 1: "2juleefransic"

3个回答

确保正确导出 datas

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

并在 app.js 中像这样调用它:

import  {datas} from './data';
Vladimir Bogomolov
2019-04-04

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

datas.json

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

在 app.js 中:

import datas from './datas.json';
Sumit Sahane
2019-04-04

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

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

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

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

但在您的情况下,您应该使用 <datas />

2019-04-04