反應按鈕條件渲染無法正常工作

Question

在 udemy 課程中使用購物車應用程序 - 問題是當數量被購買時，它應該使按鈕被禁用但它不起作用，僅在數量為零時顯示添加到購物車按鈕而不禁用它 data.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>
)}

使用數量時沒有顯示按鈕缺貨，代碼有什么問題？ 完整代碼： https ://github.com/basir/mern-amazona/commit/12e565bf6e1859b963729eaba46a5352962fe9e1

帶后端的完整代碼： https ://github.com/basir/mern-amazona/tree/12e565bf6e1859b963729eaba46a5352962fe9e1

Answer 1

也許這可以讓你開始。 無需制作2個按鈕。 您可以使用您的邏輯操作按鈕的狀態

const isOutOfStock = product.countInStock === 0
const buttonText = isOutOfStock ? "Out of stock" : "Add to cart"

<Button color="light" disabled={isOutOfStock} onClick={() => addToCartHandler(product)}>{buttonText}</Button>