На странице, есть два запроса на бэк. 1 - все товары, 2 - конкретный товар(его id).
function ItemPage({ id }) {
const [product, setProduct] = useState([])
const [productList, setProductList] = useState([])
useEffect(() => {
const fetchData = async () => {
const responseId = await getProduct(id)
setProduct(responseId.data)
console.log(responseId.data)
};
fetchData();
}, [id]);
useEffect(() => {
const fetchData = async () => {
const responseList = await getProducts();
setProductList(responseList.data.data)
};
fetchData();
}, []);
Проблема состоит в том, что у меня не выводится конкретный продукт на странице. В консоле отправляет 400 ошибку, т.к. url = undefiend.
<div className="content-inner in-col">
<div className="item-page">
<div className="item-page__holder">
<img className="item-page__image" src={ product.image } alt="item" />
<Button
label="Purchase"
/>
</div>
<div className="item-page__content">
<h3>{ product.label }</h3>
<h3>{ product.price }</h3>
</div>
</div>
<h3 className="title medium-height-padding">More products</h3>
<div className="list__item">
{
productList && productList.map(item =>
<ProductItem ......
export function getProduct(id) {
return axios.get(URL + `products/${id}`);
}
export function getProducts() {
return axios.get(URL + 'products');
}
Средний