无法通过从上下文组件传递值来显示项目

Question

所以我想在购物车列表中显示我的购物车项目，因为我已将购物车的初始状态设置为 storeProducts，我的 8 个产品应该在我使用地图功能时呈现。我还没有制作我的 cartItem.js 的 ui，但是我的 cartItem.js 应该有 8 行文本作为“这是购物车商品”。请帮我找出我的代码有什么问题！非常感谢！

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>
    )
}

沙盒 link: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 everything 以查看是否一切如预期）。就像道具正在获取数据一样。我在分叉沙箱中修复了购物车项目问题。请检查。

无法通过从上下文组件传递值来显示项目

Cannot display items by pasing value from context component

reactjs

rendering

displayobject