reactjs - 我正在学习 REACTJS，但如果有人可以帮助我，我有一个错误

Question

这是错误：TypeError：无法读取未定义的属性“名称”

代码 ：

import React from 'react'
import Product from './Product'
import vschoolProducts from './vschoolProducts'

function App() {

        const productComponenets = vschoolProducts.map ( item => <Product Products={item}/>)
return(

    <div>
       {productComponenets} 
    </div>
    )   
}

export default App

---

import React from 'react'

function Product (props) {

return (
    <div>
        <h3>{props.product.name}</h3>
        <h6>{props.product.price.toLocaleString("en-Us", {style: "currency", currency: "USD"})}</h6>
        <p>{props.product.description}</p>

    </div>
)
}

export default Product

---

const products = [

{
    id:"1",
    name:"Pencil",
    price:1,
    description:"Pencil Description Goes Here Pencil Description Goes Here Pencil Description Goes Here"
},

{
    id:"2",
    name:"Housing",
    price:0,
    description:"Housing Description Goes Here Housing Description Goes Here Housing Description Goes Here"
},

{
    id:"3",
    name:"Computer Rental",
    price:300,
    description:"Computer Rental Description Goes Here Computer Rental Description Goes Here Computer Rental Description Goes Here"
},

{
    id:"4",
    name:"coffe",
    price:2,
    description:"coffe Description Goes Here coffe Description Goes Here coffe Description Goes Here"
},

{
    id:"5",
    name:"Snacks",
    price:0,
    description:"Snacks Description Goes Here Snacks Description Goes Here Snacks Description Goes Here"
},

{
    id:"6",
    name:"Rubber Duckies",
    price:3.5,
    description:"Rubber Duckies Description Goes Here Rubber Duckies Description Goes Here Rubber Duckies Description Goes Here"
}
]
export default products

标签： reactjs

Answer 1

你可以这样使用

const productComponenets = vschoolProducts.map ( item => <Product product={item}/>)

function Product ({product}) {
  return (
      <div>
          <h3>{product.name}</h3>
          <h6>{product.price.toLocaleString("en-Us", {style: "currency", currency: "USD"})}</h6>
          <p>{product.description}</p>
      </div>
  )
}