单击按钮时无法将项目添加到购物车

Question

当我点击购物车符号时，它会将其值更改为 in cart 但实际上我的产品并未呈现在购物车组件上，是否有错误或缺失我的代码，请帮我修复它！非常感谢！

Context.js:

class ProductProvider extends React.Component {
  state = {
    products: storeProducts,
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct
  };

  getItem = (id) => {
    const product = this.state.products.find((item) => item.id === id);
    return product;
  };

  addToCart = (id) => {
    console.log("add to cart");
    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 };
    });
  };

Cart.js:

import React from "react";
import CartColumns from "./CartColumns";
import CartList from "./CartList";
import EmptyCart from "./EmptyCart";

import { ProductContext } from "../App";

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Consumer>
          {(value) => {
            console.log(value, "inside Product COnt");
            if (value.length > 0) {
              return (
                <div>
                  <CartColumns />
                  <CartList items={items} />
                </div>
              );
            } else {
              <EmptyCart />;
            }
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

CartList.js:

import React from "react";
import CartItem from "./CartItem";

export default function CartList(props) {
  const { items } = props;

  return (
    <div>
      {items.cart.map((item) => (
        <CartItem
          key={item.id}
          item={item}
          increment={item.increment}
          decrement={item.decrement}
        />
      ))}
    </div>
  );
}

CartItem.js:

import React from "react";

function CartItem(props) {
  const { id, title, img, price, total, count } = props.item;
  const { increment, decrement, removeItem } = props;

  return (
    <div className="row my-1 text-capitalize text-center">
      <div className="col-10 mx-auto col-lg-2">
        <img
          src={img}
          style={{ width: "5rem", heigth: "5rem" }}
          className="img-fluid"
          alt=""
        />
      </div>
      <div className="col-10 mx-auto col-lg-2 ">
        <span className="d-lg-none">product :</span> {title}
      </div>
      <div className="col-10 mx-auto col-lg-2 ">
        <strong>
          <span className="d-lg-none">price :</span> ${price}
        </strong>
      </div>
      <div className="col-10 mx-auto col-lg-2 my-2 my-lg-0 ">
        <div className="d-flex justify-content-center">
          <div>
            <span className="btn btn-black mx-1">-</span>
            <span className="btn btn-black mx-1">{count}</span>
            <span className="btn btn-black mx-1">+</span>
          </div>
        </div>
      </div>
      <div className="col-10 mx-auto col-lg-2 ">
        <div className=" cart-icon">
          <i className="fas fa-trash" />
        </div>
      </div>

      <div className="col-10 mx-auto col-lg-2 ">
        <strong>item total : ${total} </strong>
      </div>
    </div>
  );
}

export default CartItem;

沙盒link为了更好的观察：https://codesandbox.io/s/cart-code-addict-forked-l6tfm?file=/src/cart/CartItem.js

Answer 1

几乎没有问题

改变以下

this.setState(() => {
    return (
        { products: tempProducts, cart: [...this.state.cart, product] },
        () => console.log(this.state)
    );
});

至

this.setState(
    {
        products: tempProducts,
        cart: [...this.state.cart, product]
    },
    () => console.log(this.state)
);

并且需要使用 value.cart 来检查长度和作为 prop 传递时。

而不是

if (value.length > 0) {
    return (
        <div>
            <CartColumns />
            <CartList items={items} />
        </div>
    );
}

应该是

if (value.cart.length > 0) {
    return (
        <div>
            <CartColumns />
            <CartList items={value.cart} />
        </div>
    );
}

并在 CartList、

而不是

{
    items.cart.map(item => (
        <CartItem
            key={item.id}
            item={item}
            increment={item.increment}
            decrement={item.decrement}
        />
    ));
}

应该是

{
    items.map(item => (
        <CartItem
            key={item.id}
            item={item}
            increment={item.increment}
            decrement={item.decrement}
        />
    ));
}

现在显示购物车中的物品

代码沙箱 => https://codesandbox.io/s/cart-code-addict-forked-c3kug?file=/src/cart/CartList.js

单击按钮时无法将项目添加到购物车

Cannot add item to cart when click on the button

reactjs

react-props