Default.a.map 不是反应中的函数

Question

作为初学者，我无法从我的产品数据文件中获取数据 我遵循在线教程，但我遇到了这个问题：

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 和 props

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) - 大约 1 点 50 分左右

Answer 1

在您的数据文件中，您还需要导出它。 只需在数据文件末尾添加export default product;即可。