reactjs - Default.a.map 不是 react 中的函数

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 获取 Prop 的功能

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

以及我的带有 Prop 的 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 左右

Answer 1

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