#javascript #reactjs
Вопрос:
Я застрял на проблеме, которую, как я надеюсь, легко решить, или, возможно, потому, что я использую 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
Комментарии:
1. вы уверены, что
props.quantity
это доступно? Ты пыталсяconsole.log(props.quantity)
это сделать ?2. Я думал, что это доступно, так как я могу получить доступ/вызвать другие «реквизиты», такие как заголовок, описание и т. Д., Но когда я вызвал console.log(реквизит.количество) после определения функции, я получил «Ошибка ссылки: реквизит не определен» — не уверен, как распознать это количество