Не удалось загрузить ресурс: Сервер ответил статусом 404 ошибки в консоли при нажатии, чтобы просмотреть продукт для при ⇐ Javascript

[Anonymous]

Домашняя страница с списком продукта для категорий Функциональности карты < /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 file < /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)}
>
[img]{`http://localhost:1337${getImage(colour.name)}`}
/>

))}


Selected items

{quantity.map((number) => (
{number}
))}




addToBasket({
...product,
description,
size: selectedSize,
color: selectedColor,
quantity: selectedQuantity,
imageUrl: getImage(selectedColor),
})
}
>
Add to basket







);
};

export default ProductView;
< /code>
Для извлечения данных с сервера Strapi Я использую пользовательский крюк с функцией GetiMage для просмотра продукта из списка после того, как пользователь щелкнул карту продукта. < /p>
useproductview.js
>
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";

export const getQuery = (key, search) => {
const querys = search?.replace("?", "")?.split("&");
const query = querys.find((query) => query.includes(key));
const queryValue = query?.replace(`${key}=`, "");
return queryValue;
};

export const useProductView = () => {
const { id: productId } = useParams();
const [rating, setRating] = useState({ stars: null, count: 0 });
const [getLatestProductUpdate, setgetLatestProductUpdate] = useState(false);
const { search } = useLocation();

const [product, setProduct] = useState({});
const [selectedColor, setSelectedColor] = useState("");
const [selectedSize, setSelectedSize] = useState("");
const [selectedQuantity, setSelectedQuantity] = useState(1);

const handleQuantityChange = ({ target: { value } }) => {
setSelectedQuantity(value);
};

const getImage = (colour) => {
const { attributes } = product;
const image = attributes.images.data.find((image) =>
image.attributes.name.includes(colour)
);

return image?.attributes?.url || "";
};

useEffect(() => {
if (product && product.attributes) {
const { attributes } = product;
setSelectedColor(getQuery("color", search) || attributes.colours[0].name);
setSelectedSize(getQuery("size", search) || attributes.sizes[0].name);
}
}, [product, search, setSelectedColor, setSelectedSize]);

useEffect(() => {
const fetchCategories = async () => {
try {
const {
data: { data },
} = await axios.get(
`http://localhost:1337/api/products/${pr ... ?populate=*`
);
setProduct(data);
setgetLatestProductUpdate(false);
} catch (error) {
console.log({ error });
}
};

if (productId) {
fetchCategories();
}
}, [productId, getLatestProductUpdate]);

return {
rating,
product,
getImage,
setRating,
selectedSize,
selectedColor,
selectedQuantity,
setSelectedColor,
setSelectedSize,
handleQuantityChange,
setgetLatestProductUpdate,
};
};
< /code>
Может ли кто -нибудь показать мне, как получить данные из Strapi, когда пользователь нажимает на продукт из списка, который они могут просмотреть, что изображение продукта и цена из изображений ниже, как вы можете видеть, что я получаю ошибку, не найденный, а продукт настроен на сервере < /p>


Подробнее здесь: https://stackoverflow.com/questions/794 ... or-in-cons