reactjs - Default.a.map 不是反应中的函数
问题描述
作为初学者,我无法从我的产品数据文件中获取数据,我按照在线教程进行操作,但我遇到了这个问题:
react-dom.development.js:20135 Uncaught TypeError: _productsData__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function
at Products (Products.js:9)
at mountIndeterminateComponent (react-dom.development.js:15425)
at beginWork (react-dom.development.js:15956)
at performUnitOfWork (react-dom.development.js:19102)
at workLoop (react-dom.development.js:19143)
at renderRoot (react-dom.development.js:19228)
at performWorkOnRoot (react-dom.development.js:20165)
at performWork (react-dom.development.js:20075)
at performSyncWork (react-dom.development.js:20049)
at requestWork (react-dom.development.js:19904)
at scheduleWork (react-dom.development.js:19711)
at scheduleRootUpdate (react-dom.development.js:20415)
at updateContainerAtExpirationTime (react-dom.development.js:20441)
at updateContainer (react-dom.development.js:20509)
at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20820)
at react-dom.development.js:20974
at unbatchedUpdates (react-dom.development.js:20292)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:20970)
at Object.render (react-dom.development.js:21037)
at Module../src/index.js (index.js:11)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.0 (serviceWorker.js:135)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1import React from "react";
我一直在寻找没有明确的答案。
这是我的 index.js
import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import Products from './Products';
ReactDOM.render(<Products />, document.getElementById("root"));
serviceWorker.unregister();
和我的 Products.js 文件,其中包含从单个 Product.js 获取道具的功能
import React from "react"
import Product from "./Product"
import productsData from "./productsData"
function Products(){
const productComponents = productsData.map(item =>
<Product product={item}/>)
return (
<div>
<h1>{productComponents}</h1>
</div>
)
}
export default Products
以及我的 Product.js 和道具
import React from "react"
function Product(props) {
return (
<div>
<h2>{props.product.name}</h2>
</div>
)
}
export default Product
当然还有我的数据文件
const product =
[
{
id: "1",
name: "house",
price : "250666"
},
{
id: "2",
name: "cake",
price : "4000"
},
{
id: "3",
name: "car",
price: "54000"
}
]
让我烦恼的是它在演示中运行良好,但在我做完全相同的事情时却不行!
请帮助(https://www.youtube.com/watch?v=DLX62G4lc44&t=6038s) - 大约 1h50 左右
解决方案
在您的数据文件中,您还需要将其导出。只需export default product;
在数据文件末尾添加即可。
推荐阅读
- node.js - 发布时,我可以将“link:../dir”替换为所链接的包的版本吗?
- python - Python多进程记录到共享文件
- php - 此 React 应用程序中的实际数据和演示数据不同
- android - 有什么方法可以在不更新应用程序的情况下动态更新添加到 webview 中的应用程序的链接?
- javascript - 如何将对象中的每个值写入文本文件中的每一行
- javascript - 在 Google Script 中的一行单元格上使用 setFormula()?
- android - 是否可以使用 CameraCharacterstics 对象区分前后摄像头
- angular - Authguard 阻止导航注册路线。它总是重定向到登录页面
- regex - 如何从 Google 表格中的字符串中提取文本
- node.js - 弹性搜索“过滤器”查询不起作用