TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function

Question

我是 ReactJs 的新手，尝试从 youtube 频道完成任务。我在 "SchoolProduct.js" 中创建了数组 "products"，然后使用 props 我在 Product.js 中传递了值。现在App.js，我用map函数来获取数据（可能是我对 props 或 map 函数理解有误）

这里是学校Product.js:

 const products = [
 {
  id: "1",
  name: "pencil",
  price: 1,
  description: "this is pencil"
 },
 {
  id: "2",
  name: "rubber",
  price: 10,
  description: "this is rubber"
 }

]

这是我的Product.js

import React from "react"
function Product(props)
{
 return
 (
    <div>
     <h2>{props.product.name}</h2>
     <p>{props.product.price.toLocaleString("en-US", {style: "currency", 
      currency: "USD"})}
     - {props.product.description}</p>
    </div>
  )

}

export default Product

这是我的 App.js

import React, { Component } from 'react';
import Product from "./Product"
import productsData from "./SchoolProduct"


 function App(){

  const productsComponents = productsData.map(item => <Product product= 
   {item}/>)

  return (
   <div>
    {productsComponents}
   </div>
 )
}

export default App;

错误是： TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map 不是一个函数

它在 App.js 第 8 行显示错误，即 "const productsComponents"

我知道我犯了一个愚蠢的错误，但我正在努力改进它

Answer 1

我必须以默认方式导出我的错误，

const products = [
 {
  id: "1",
  name: "pencil",
  price: 1,
  description: "this is pencil"
 },
 {
  id: "2",
  name: "rubber",
  price: 10,
  description: "this is rubber"
 }
]
export default products

Answer 2

export default [
    {
        id: "1",
        name: "Pencil",
        price: 1,
        description: "Perfect for those who can't remember things! 5/5 Highly recommend."
    },
    {
        id: "2",
        name: "Housing",
        price: 0,
        description: "Housing provided for out-of-state students or those who can't commute"
    },
    {
        id: "3",
        name: "Computer Rental",
        price: 300,
        description: "Don't have a computer? No problem!"
    },
    {
        id: "4",
        name: "Coffee",
        price: 2,
        description: "Wake up!"
    },
    {
        id: "5",
        name: "Snacks",
        price: 0,
        description: "Free snacks!"
    },
    {
        id: "6",
        name: "Rubber Duckies",
        price: 3.50,
        description: "To help you solve your hardest coding problems."
    },
    {
        id: "7",
        name: "Fidget Spinner",
        price: 21.99,
        description: "Because we like to pretend we're in high school."
    },
    {
        id: "8",
        name: "Sticker Set",
        price: 14.99,
        description: "To prove to other devs you know a lot."
    }
]

TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function

TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function

typeerror

reactjs

react-props