React项目点击添加购物车按钮无法加入商品且购物车不渲染问题排查

错误汇总及修复方案 #

1. Context.js 错误 #

• addToCart 方法中setState语法错误：你用逗号运算符把状态对象和回调函数包在一起，导致实际返回给setState的是回调函数而非状态对象，购物车状态从未正确更新
• openModal 方法中状态属性名写错，将modalOpen写成了openModal，导致弹窗状态异常
  修复后的代码：

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;
    // 修正setState写法，回调作为第二个参数传入
    this.setState(
      { products: tempProducts, cart: [...this.state.cart, product] },
      () => console.log(this.state)
    );
  };

  openModal = (id) => {
    const product = this.getItem(id);
    this.setState(() => {
      // 修正属性名
      return { modalProduct: product, modalOpen: true };
    });
  };

  closeModal = (id) => {
    this.setState(() => {
      return { modalOpen: false };
    });
  };
}

2. Cart.js 错误 #

• 从Context拿到的value是完整的上下文对象，不是购物车数组，判断value.length永远为false，所以永远不会渲染购物车列表
• 传递给CartList的items变量未定义
• 空购物车分支缺少return语句，EmptyCart组件不会渲染
  修复后的代码：

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.cart.length > 0) {
              return (
                <div>
                  <CartColumns />
                  {/* 传入完整的context对象 */}
                  <CartList items={value} />
                </div>
              );
            } else {
              // 补充return
              return <EmptyCart />;
            }
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

3. CartList.js 错误 #

• 购物车操作方法increment、decrement是挂载在context对象上的，不是单个商品对象的属性，需要从context中提取传递
  修复后的代码：

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}
          // 从context中提取方法传递
          increment={items.increment}
          decrement={items.decrement}
          removeItem={items.removeItem}
        />
      ))}
    </div>
  );
}

4. CartItem.js 错误 #

• 加减按钮、删除按钮未绑定对应的点击事件，无法触发操作
• 图片样式属性拼写错误，heigth应为height
  修复后的代码：

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", height: "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" onClick={() => decrement(id)}>-</span>
            <span className="btn btn-black mx-1">{count}</span>
            <span className="btn btn-black mx-1" onClick={() => increment(id)}>+</span>
          </div>
        </div>
      </div>
      <div className="col-10 mx-auto col-lg-2 ">
        <div className=" cart-icon">
          {/* 绑定删除事件 */}
          <i className="fas fa-trash" onClick={() => removeItem(id)} />
        </div>
      </div>

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

export default CartItem;

内容的提问来源于stack exchange，提问作者na ha