Мне нужно отображать соответствующие продукты при нажатии на определенную категорию. При открытии страницы продукта изображение продукта не отображается. В противном случае для других элементов отображаются теги абзаца и т. д. Вот мой код.
Страница
MenuCategory, где отображаются мои категории блюд, при нажатии на каждую категорию открываются продукты, а ее изображение не отображается.
импортировать React из «реагировать»; импортировать {useParams} из "реагировать-маршрутизатора-дом"; импортировать {меню} из "../../Data"; const MenuCategory = () => { const {категория} = useParams(); функция ConvertToSlug(текст){ return text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,''); } // Найдите объект категории в данных меню, который соответствует параметру URL const selectedCategory = menu.find( (menuCategory) => ConvertToSlug(menuCategory.category) === категория ); // Проверяем, найдена ли категория, и если да, получаем ее товары константная категорияПродукты = выбраннаяКатегория? selectedCategory.products : []; console.log(категорияПродукты); возвращаться ( {категория {categoryProducts.map((asianFood, index) => (
e.target.src = "/path-to-placeholder-image.jpg"} /> {asianFood.title}
{asianFood.price
))} ); }; экспортировать MenuCategory по умолчанию;
export const меню = [ { категория: «Азиатская кухня», img: "images/menu/asianfusion-1-300x300.jpg", продукты: [ { img2: "images/menu/Asian/blackpepperasian.jpg", название: «Черный перец азиатский», цена: "1500", }, { img2: "images/menu/Asian/chickenchillidry-300x300.jpg", Название: «Сухая курица с перцем чили», цена: "1800", }, // Добавьте сюда больше продуктов азиатской кухни ], }, { категория: «Континентальная еда», продукты: [ // Добавьте сюда продукты Continental Food ], }, // Добавляем сюда другие категории и их товары ]; импортировать React из «реагировать»; импортировать {меню} из "../../Data"; импортировать {ссылку} из "реагировать-маршрутизатора-dom"; константное меню = () => { возвращаться ( Меню {menu.map((категория) => (
{category.category
))} ); }; экспорт меню по умолчанию;
Мое изображение не отображается
e.target.src = "/path-to-placeholder-image.jpg"} /> но теги ниже отображаются
{asianFood.title}
{asianFood.price
Мобильная версия