Die Ressource fehlgeschlagen: Der Server antwortete mit einem Status von 404 Fehler in der Konsole, wenn Sie auf das Pro ⇐ JavaScript

[Anonymous]

Homepage mit der Produktliste für Kategorien-Kartenfunktionen < /p>
import Product from "./Product";
import { Row, Col } from "reactstrap";
import { useProducts } from "./useProducts";
import { useNavigate } from "react-router-dom";

const Home = () => {
const { categories, products } = useProducts();
const navigate = useNavigate();

const navigateToProductView = (url) => {
navigate(url);
};
return (


Enjoy our sales!

{categories.length
? categories.map((category) => {
const hasProducts = products.filter(
(product) =>
product.category?.id === category.id
);
return hasProducts && hasProducts.length ? (

{category.name}

{hasProducts.map((product) => (

navigateToProductView(
`/product-details/${product.id}`
)
}
>


))}


) : null;
})
: null}


);
};

export default Home;
< /code>
ProductView.js Datei < /p>
import { useProductView } from "./useProductView";
import {
Row,
Col,
Label,
Input,
Button,
CardImg,
CardText,
CardBody,
CardTitle,
FormGroup,
CardSubtitle,
} from "reactstrap";
import ProductReview from "../ProductReview";
import { Rating } from "react-simple-star-rating";

const ProductView = ({ token, addToBasket }) => {
const {
rating,
product,
getImage,
setRating,
description,
selectedColor,
selectedSize,
selectedQuantity,
setSelectedColor,
setSelectedSize,
handleQuantityChange,
setgetLatestProductUpdate,
} = useProductView();

console.log({product});

if (!product || !product.attributes) {
return null;
}
const { id, attributes } = product;
const quantity = Array.from(Array(Number(attributes.quantity)).keys());

return (









{attributes.name}
{attributes.description}


{`${
rating.count > 1
? `${rating.count} ratings`
: `${rating.count} rating`
}`}


Price: £{attributes.price}

{attributes.quantity} items Left

Sizes:

{attributes.sizes.map((size) => (
setSelectedSize(size.name)}
>
{size.name}

))}



Selected colour: {selectedColor}

{attributes.colours.map((colour) => (
setSelectedColor(colour.name)}
>