反应按钮条件渲染无法正常工作

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>