无法通过从上下文组件中粘贴值来显示项

Question

所以我想在购物车列表中显示我的购物车项目，因为我已经将购物车的初始状态设置为storeProducts，我的8个产品应该在我使用map函数时呈现。我还没有制作cartItem.js的ui，但相反，我应该有8行文本作为"这是一个购物车项目"；来自我的cartItem.js。请帮我找出我的代码出了什么问题！非常感谢！

context.js:

class ProductProvider extends React.Component {
state = {
products: storeProducts,
detailProduct: detailProduct,
cart: storeProducts,
modalOpen: false,
modalProduct: detailProduct
};
getItem = (id) => {
const product = this.state.products.find((item) => item.id === id);
return product;
};
addToCart = (id) => {
let tempProducts = [...this.state.products];
const index = tempProducts.indexOf(this.getItem(id));
const product = tempProducts[index];
product.inCart = true;
product.count = 1;
const price = product.price;
product.total = price;
this.setState(() => {
return (
{ products: tempProducts, cart: [...this.state.cart, product] },
() => console.log(this.state)
);
});
};
openModal = (id) => {
const product = this.getItem(id);
this.setState(() => {
return { modalProduct: product, openModal: true };
});
};
closeModal = (id) => {
this.setState(() => {
return { modalOpen: false };
});
};
render() {
return (
<ProductContext.Provider
value={{
...this.state,
addToCart: this.addToCart,
openModal: this.openModal,
closeModal: this.closeModal
}}
>
{this.props.children}
</ProductContext.Provider>
);
}
}

CartItem.js:

import React from "react";
function CartItem(item) {
return <div>this is a cart item</div>;
}
export default CartItem;

CartList.js:

import React from "react";
import CartItem from "./CartItem"
export default function CartList (props) {
const {cart} = props
return (
<div>
{cart.map((item) => (
<CartItem key={item.id} item={item} />
))}
</div>
)
}

沙盒链接：https://codesandbox.io/s/cart-code-addict-buz0u?file=/src/cart/CartList.js

Answer 1

https://codesandbox.io/s/cart-code-addict-forked-uonqs?file=/src/cart/CartList.js

有很多虫子。应导入上下文。Value.length未定义。请再次检查代码，看看数据是否在流动(Console.log一切，看看一切是否如预期(。就像道具在获取数据一样。我已经修复了分叉沙盒中的购物车项目问题。请检查。