如何将对象数组文件访问到反应组件中?
我正在尝试访问 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"
确保正确导出
datas
export const datas=[
{
"id": "1",
"firstname": "sam",
"lastname": "parkar"
},
{
"id": "2",
"firstname": "julee",
"lastname": "fransic"
}
];
并在 app.js 中像这样调用它:
import {datas} from './data';
您可以像这样使用 JSON 文件:
datas.json
[
{
"id":"1",
"firstname":"sam",
"lastname":"parkar"
},
{
"id":"2",
"firstname":"julee",
"lastname":"fransic"
}
]
在 app.js 中:
import datas from './datas.json';
如果您使用的是 JSON 文件,则将该文件保存为 datas.json
现在在您的 app.js 文件中使用
<datas/>
而不是
{datas>
。
您可以在 jsx 属性中使用它时使用
{datas>
。例如-
<textarea name="JSON" value={datas} />
。
但在您的情况下,您应该使用
<datas />
。