如何将对象数组文件访问到反应组件中?
Posted
技术标签:
【中文标题】如何将对象数组文件访问到反应组件中?【英文标题】: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以上是关于如何将对象数组文件访问到反应组件中?的主要内容,如果未能解决你的问题,请参考以下文章