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

Posted 2023-02-22

【中文标题】如何将对象数组文件访问到反应组件中？

【英文标题】：How to access Object array file into react component?

【发布时间】：2019-08-25 20:27:17

【问题描述】：

我正在尝试访问 src 文件夹中的对象数组文件，例如：data.js（仅限对象数组）这个文件进入我的 app.js（反应组件）

在第一种情况下 1.我在

中使用 react 尝试过这个问题

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

当我运行时它向我显示一个错误，例如

（类型错误：_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”

【问题讨论】：

旁注：“Data”已经是一个复数词，“Datum”是这个词的单数形式。所以“数据”从不带“s”。

【参考方案1】：

确保正确导出datas

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

在 app.js 中这样称呼它：

import  datas from './data';

【讨论】：

导入数据后，怎么称呼“名字”？

@Deborah 你想得到一个名字数组吗？然后const firstNames = datas.map( e => e.firstname)

【参考方案2】：

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

datas.json

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

在 app.js 中：

import datas from './datas.json';

【参考方案3】：

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

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

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

<textarea name="JSON" value=datas />.

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

【讨论】：

我已经尝试了您的解决方案，非常感谢它的工作原理！ +1