Блог

Я застрял на проблеме, которую, как я надеюсь, легко решить, или, возможно, потому, что я использую LTS NodeJS

Но просто при загрузке страницы оформления заказа в моей корзине покупок => количество товара не отображается / не отображается

Вы можете видеть в моем CheckoutProduct.js исходный код, который я пытаюсь назвать {количество} и определил реквизит над ним как «const количество = реквизит.количество».

Я назвал все остальные переменные, такие как идентификатор, название, цена, и все они работают! Меня огорчает только величина количества…есть какие-нибудь идеи? Заранее большое спасибо

     import Image from "next/image"
import Currency from 'react-currency-formatter'
import { Form } from "react-bootstrap";
import { StarIcon } from "@heroicons/react/solid"
import { useDispatch } from 'react-redux'
import { removeFromBasket } from '../slices/basketSlice'
import { updateItemQuantity, removeItem } from "../slices/cartSlice";


function CheckoutProduct(props) {
    const dispatch = useDispatch();
    
    const id = props.id;
    const title = props.title;
    const rating = props.rating;
    const price = props.price;
    const description = props.description;
    const category = props.category;
    const image = props.image;
    const quantity = props.quantity;
    const total = price * quantity;

        const updateQuantity = (e) => {
            const itemQuantity = e.target.value;
              dispatch(updateItemQuantity({ id, quantity: parseInt(itemQuantity) }));
          };

    function removeItemFromBasket () {
        dispatch(removeFromBasket({ id }))
    }

    return (
        <div className="grid grid-cols-5">
            <Image
                src={image}
                height={200}
                width={200}
                objectFit="contain"
            />

            {/* Middle */}
            <div className="col-span-3 mx-5">
                <p>{title}</p>
                    <div className="flex">
                        {Array(rating)
                            .fill()
                            .map((_, i) => (
                                <StarIcon key={i} className="h-5 text-yellow-500" />
                            ))}
                    </div>

                    <p className="text-xs my-2 line-clamp-3">{description}</p>
                        <Currency quantity={price} currency="USD" />

                   <div className="flex items-center">
                     <div className="w-4rem mt-0.5">
                          <Form>
                            <Form.Group>
                                <Form.Control
                                 className="border-solid border-2"
                                 type="number"
                                 size="sm"
                                 value={quantity}
                                 onChange={updateQuantity}
                                />
                            </Form.Group>
                         </Form>
                     </div>

                <div className="checkout-card__action__delete">
                     <span className="ml-3 mr-3">|</span>
                        <span 
                            onClick={removeItemFromBasket}
                            className="cursor-pointer"
                            >Delete</span>
               </div>
             </div>
           </div> 
        </div> 
    );
}

export default CheckoutProduct