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

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";

我的 Products.js 文件具有从各个 Product.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();

以及我的 Product.js 和 props

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

当然还有我的数据文件

import React from "react"

function Product(props) {
   
     return (
            <div>
               <h2>{props.product.name}</h2>
            </div>
        )
}

export default Product

让我烦恼的是它在演示中工作正常，但当我做完全相同的事情时却不行！

请帮忙 ( https://www.youtube.com/watch?v=DLX62G4lc44&t=6038s ) - 大约 1 小时 50 分左右

Answer 1

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