#javascript #node.js #reactjs
Вопрос:
Я учусь и пытаюсь создать веб-сайт с помощью интерфейса react.js и бэкэнд node.js.Я создал Api, используя node.js и хотите отобразить данные в карточке.Хотя данные получены,но изображение не отображается,и все данные(все изображение, имя, цена) отображаются на одной карточке.как это решить?
<Ползунок {…настройки}> {
products.map((popularObject, i) => (
<li key={popularObject._id}>
<div className="card-wrapper">
<ul className="product">
<div className="card">
<Link to={'/product/' popularObject._id}>
<img className="card-image" src={
(typeof (popularObject.popular) == 'object') ?
<div>
{
popularObject.popular.map((subpopularObject, index) => {
<div key={index}>
{subpopularObject.imageUrl}
</div>
}
)
}
</div>
:
null
} alt="popular" />
</Link>
<div className="details">
<div className="job-title">
<h4><p className="tag">Radhunir Rannaghor</p><Link to={'/product/' popularObject._id}>
{
(typeof (popularObject.popular) == 'object') ?
<div>
{
popularObject.popular.map((subpopularobj,index) =>
<div key={index}>{subpopularobj.name}</div>
)
}
</div>
:
null
}
</Link><span className="job-title"></span> </h4>
</div>
<div className="job-title-price"> <h4> ${popularObject.popular[i].price}</h4></div>
</div>
</div>
</ul>
</div>
</li>
))}
</Slider>
// here is data.js
{
products: [
{
popular: [
{
_id: '1',
name: 'Nasi Goreng',
imageUrl: 'imagestest/3.jpg',
rating: '5.0',
deliveryTime: '45 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Extra special'
},
{
_id: '2',
name: 'Rendang',
imageUrl: 'imagestest/7.jpg',
rating: '4.9',
deliveryTime: '35 mins',
deliveryCharges: 'Free Delivery',
price: '250',
note: 'Special'
},
{
_id: '3',
name: 'Nasi Padang',
imageUrl: 'imagestest/16.jpg',
rating: '4.5',
deliveryTime: '55 mins',
deliveryCharges: 'Delivery charges 50 extra',
price: '199',
note: 'Chilly'
},
{
_id: '7',
name: 'Pece',
imageUrl: 'imagestest/13.jpg',
rating: '4.0',
deliveryTime: '75 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Special, Spicy'
},
{
_id: '4',
name: 'Indomie',
imageUrl: 'imagestest/13.jpg',
rating: '3.8',
deliveryTime: '25 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Special, Spicy'
}
],
recommended: [
{
_id: '2',
name: 'Rendang',
imageUrl: 'imagestest/7.jpg',
rating: '4.9',
deliveryTime: '35 mins',
deliveryCharges: 'Free Delivery',
price: '250',
note: 'Special'
},
{
_id: '1',
name: 'Nasi Goreng',
imageUrl: 'imagestest/3.jpg',
rating: '5.0',
deliveryTime: '45 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Extra special'
},
{
_id: '7',
name: 'Pece',
imageUrl: 'imagestest/13.jpg',
rating: '4.0',
deliveryTime: '75 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Special, Spicy'
}
],
allmenu: [
{
_id: '1',
name: 'Nasi Goreng',
imageUrl: 'imagestest/3.jpg',
rating: '5.0',
deliveryTime: '45 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Extra special'
},
{
_id: '2',
name: 'Rendang',
imageUrl: 'imagestest/4.jpg',
rating: '4.9',
deliveryTime: '35 mins',
deliveryCharges: 'Free Delivery',
price: '250',
note: 'Special'
},
{
_id: '3',
name: 'Nasi Padang',
imageUrl: 'imagestest/6.jpg',
rating: '4.5',
deliveryTime: '55 mins',
deliveryCharges: 'Delivery charges 50 extra',
price: '199',
note: 'Chilly'
},
{
_id: '4',
name: 'Indomie',
imageUrl: 'imagestest/12.jpg',
rating: '3.8',
deliveryTime: '25 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Special, Spicy'
},
{
_id: '5',
name: 'Rendang',
imageUrl: 'imagestest/6.jpg',
rating: '4.9',
deliveryTime: '35 mins',
deliveryCharges: 'Free Delivery',
price: '250',
note: 'Special'
},
{
_id: '6',
name: "Nasi Goreng",
imageUrl: 'imagestest/7.jpg',
rating: '5.0',
deliveryTime: '45 mins',
deliveryCharges: 'Free Delivery',
price: '250',
note: ''
},
{
_id: '7',
name: 'Pece',
imageUrl: 'imagestest/1.jpg',
rating: '4.0',
deliveryTime: '75 mins',
deliveryCharges: 'Free Delivery',
price: '150',
note: 'Special, Spicy'
}
]
}
]
} ///вывод
Комментарии:
1. не могли бы вы добавить рабочий образец с помощью codesandbox l?
Ответ №1:
Насколько я понимаю, вы хотите отобразить 1 карту на популярный продукт.
Таким образом, это означает, что первый map должен быть включен products.popular , а не просто products :
<Slider {...settings}> {
products.popular.map((popularObject, i) => (
<li key={popularObject._id}>
// …
</li>
))
}
</Slider>
Сделав это изменение, вы подразумеваете, что все внутренние map данные, которые вы используете для каждой отдельной части карты, больше не существуют, так как у вас уже есть popularObject область действия со всеми необходимыми значениями.