React购物车countInStock为0时按钮条件渲染失效问题

问题表现 #

• 商品实际库存售罄（可用数量为0）时，加购按钮未自动切换为禁用状态的「Out of stock」样式，始终显示可点击的「Add to cart」
• 加购逻辑中接口返回的最新库存字段countInStock未同步到页面渲染层，状态判断数据源过时

现存代码逻辑缺陷 #

import { Button } from 'react-bootstrap';
import { Card } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import React, { useContext } from 'react';
import Rating from './Rating';
import axios from 'axios';
import { Store } from '../Store';

function Product(props){
 const {product} = props;

const {state , dispatch:ctxDispatch} = useContext(Store);
const {cart: {cartItems}} = state

const addToCartHandler = async (item )=>{
  const existItem = cartItems.find((x)=> x._id === product._id);
   const quantity = existItem ? existItem.quantity+1:1 ; 

  const {data} = await axios.get(`/api/products/${item._id}`);
  if(data.countInStock < quantity){
      window.alert('sorry product is out of stock')
      return;
  }
   ctxDispatch({
       type:'CART_ADD_ITEM' 
       , payload:{...item , quantity},
   });
  };
  

return(

    <Card>


    <Link to={`/product/${product.slug}`}> 
      <img src={product.image} className="card-img-top" alt={product.name} />
    </Link>
    <Card.Body>
    <Link to={`/product/${product.slug}`}>
        <Card.Title>{product.name}</Card.Title>
    </Link>
    <Rating rating={product.rating} numReviews={product.numReviews} />
    <Card.Text>${product.price}</Card.Text>

    {  product.countInStock === 0 ? (

      
      <Button  color="light" disabled={true} >  Out of stock</Button>
      
    ):(
      
      <Button onClick={() => addToCartHandler(product)}>Add to cart</Button>
    )}
  </Card.Body>
</Card>
)}

核心问题点：

• 按钮渲染的三元判断完全依赖父组件传入的初始product.countInStock值，该值不会随着加购操作、接口返回的最新库存动态更新
• 加购时虽然调用接口拿到了最新库存，但既没有同步更新商品列表中对应商品的库存字段，也没有在渲染层扣除购物车中已加购的同商品数量，哪怕实际可售库存已经被加购占满，只要初始传入的库存值不为0，就会一直渲染可点击的加购按钮
• 按钮状态判断和加购前的库存校验逻辑脱节：加购时用接口返回的最新库存校验，按钮渲染用初始props的库存判断，两个逻辑数据源不一致
• 组件库属性写错：react-bootstrap的Button组件样式属性为variant，原代码写的color="light"不会生效

修复步骤 #

1. 统一库存判断的数据源：在组件加载、加购操作完成后，同步拉取并更新对应商品的最新countInStock值到全局/本地状态，不要直接用初始props的静态值做渲染判断
2. 修正按钮禁用判断逻辑：计算剩余可售库存时，需要扣除购物车中已加购的该商品总数量，判断条件改为剩余可售库存 <= 0时渲染禁用的售罄按钮
3. 抽离公共的库存校验方法，保证按钮状态判断和加购前的库存校验逻辑完全一致，避免逻辑不一致导致的状态错位
4. 修正Button组件的样式属性为variant

修复后核心代码片段 #

// 先找到购物车中当前商品的已加购数量
const existCartItem = cartItems.find(x => x._id === product._id);
const addedQuantity = existCartItem ? existCartItem.quantity : 0;
// 计算实际剩余可售库存（如果已经同步了最新库存就用最新值，否则用初始值兜底）
const currentStock = product.latestCountInStock ?? product.countInStock;
const remainStock = currentStock - addedQuantity;

// 按钮渲染逻辑
{ remainStock <= 0 ? (
  <Button variant="light" disabled>Out of stock</Button>
) : (
  <Button onClick={() => addToCartHandler(product)}>Add to cart</Button>
)}

同时需要在Store的reducer中新增商品库存更新的action类型，在接口拿到最新商品数据时，派发action更新对应商品的最新库存值，保证全组件用到的库存数据一致。

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