时间戳

首页 > 解决方案 > 类型错误：_SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map 不是函数

reactjs - 类型错误：_SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map 不是函数

问题描述

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

这是 SchoolProduct.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”

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

标签： reactjstypeerrorreact-props

解决方案

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

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

推荐阅读