我正在尝试访问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”
答案 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 />
。