Reactjs TypeError:_SchoolProduct_uuuWebpack_uImported_uModule_u2_uuuuDefault.a.map不是函数
我是ReactJs的新手,尝试从youtube频道完成一项任务。 我在SchoolProduct.js中创建了数组产品,然后使用道具将值传递到Product.js中。 现在在App.js中,我使用map函数获取数据 也许我对道具或地图功能理解有误 以下是SchoolProduct.js:Reactjs TypeError:_SchoolProduct_uuuWebpack_uImported_uModule_u2_uuuuDefault.a.map不是函数,reactjs,typeerror,react-props,Reactjs,Typeerror,React Props,我是ReactJs的新手,尝试从youtube频道完成一项任务。 我在SchoolProduct.js中创建了数组产品,然后使用道具将值传递到Product.js中。 现在在App.js中,我使用map函数获取数据 也许我对道具或地图功能理解有误 以下是SchoolProduct.js: const products = [ { id: "1", name: "pencil", price: 1, description: "this is pencil" }, {
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_uuuWebpack_uImported_uModule_u2_uuuuDefault.a.map不是函数
它在App.js第8行显示错误,该行是const products components
我知道我犯了一个愚蠢的错误,但我正在努力改进它我必须以默认方式导出我的错误
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
您需要在SchoolProduct中导出数组,export const products=[@Phix现在显示尝试导入错误:“./SchoolProduct”不包含作为“productsData”导入的默认导出。
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."
}
]