【发布时间】：2021-08-05 09:32:39
【问题描述】：
我正在为 Shopping cart 编写代码。这是我的代码：
product-list/index.js
import React, {Component} from "react";
import "./index.css";
export default class ProductList extends Component {
// constructor() {
// super();
// }
render() {
return (
<div className="layout-row wrap justify-content-center flex-70 app-product-list">
{this.props.products.map((product, i) => {
return (
<section className="w-30"
data-testid={'product-item-' + i}
key={product.id}>
<div className="card ma-16">
<img alt="Your Cart" src={product.image}
className="d-inline-block align-top product-image"/>
<div className="card-text pa-4">
<h5 className="ma-0 text-center">{product.name}</h5>
<p className="ma-0 mt-8 text-center">${product.price}</p>
</div>
<div className="card-actions justify-content-center pa-4">
{product.cartQuantity===0 ?
<button className="x-small outlined" data-testid="btn-item-add"
onClick={()=>{this.props.add(product);}}>
Add To Cart
</button>
:
<div className="layout-row justify-content-between align-items-center">
<button className="x-small icon-only outlined"
data-testid="btn-quantity-subtract"
onClick={()=>this.props.sub(product)}>
<i className="material-icons">remove</i>
</button>
<input type="number"
disabled
className="cart-quantity" data-testid="cart-quantity" value={product.cartQuantity}/>
<button className="x-small icon-only outlined"
data-testid="btn-quantity-add" onClick={()=>this.props.add(product)}>
<i className="material-icons">add</i>
</button>
</div>
}
</div>
</div>
</section>
)
})}
</div>
);
}
}
export const UpdateMode = {
ADD: 1,
SUBTRACT: 0
}
cart/index.js
import React, { Component } from "react";
import "./index.css";
export default class Cart extends Component {
render() {
return (
<div className="card my-16 mr-25 flex-30">
<section className="layout-row align-items-center justify-content-center px-16">
<h4>Your Cart</h4>
</section>
<div className="divider" />
<table>
<thead>
<tr>
<th></th>
<th>Item</th>
<th className="numeric">Quantity</th>
</tr>
</thead>
<tbody>
{this.props.cart.items.map((cartItem, idx) => {
return (
<tr
data-testid={"cart-item-" + idx}
key={idx + 1}
className="slide-up-fade-in"
>
<td>{idx + 1}.</td>
<td className="name" data-testid="cart-item-name">
{cartItem.name}
</td>
<td
className="numeric quantity"
data-testid="cart-item-quantity"
>
{cartItem.cartQuantity}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
这会返回这些错误：
TypeError：无法读取未定义的属性“地图”
ProductList.render
src/components/product-list/index.js:11
8 |
9 |渲染（）{
10 |返回 (
11 |
| ^ 12 | {this.props.products.map((product, i) => {
13 |返回 (
14 |类型错误：无法读取未定义的属性“地图”
购物车.render
src/components/cart/index.js:20
17 |数量
18 |
19 |
20 |
| ^ 21 | {this.props.cart.items.map((cartItem, idx) => {
22 |返回 (
23 |我该如何解决这个问题？
【问题讨论】：
标签： javascript reactjs