React如何从存储在useParams产品项数据中的数组中映射图像

Question

我是一个编码新手，试图学习React，所以这是我的问题:

My Data file

import Car1 from '../../img/car1.jpg'
import Car2 from '../../img/car2.jpg'
const carsData = [
{
id: '1',
image: [Car1, Car1, Car1, Car1],
price: '$80 000',
},
{
id: 2,
image: [Car2, Car2, Car2, Car2],
},
]

我ProductDetailsPage

import React, { useState } from "react";
import "./CarProductDetails.css";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper";
import carsData from "../data/CarsData";
import { useParams } from "react-router-dom";
const CarProductDetails = () => {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const { productId } = useParams();
const thisProduct = carsData.find((product) => product.id === productId);
return (
<>

<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
loop={true}
spaceBetween={10}
navigation={true}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{/* I want to render each image from data array to each SwiperSlide  */}
<SwiperSlide>
<img src={thisProduct.image} />
</SwiperSlide>

</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
spaceBetween={5}
slidesPerView="4"
freeMode={true}
watchSlidesProgress={true}
allowTouchMove={false}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{/* Same here - it's a thumbnail images */}
<SwiperSlide>
<img src={thisProduct.image} />
</SwiperSlide>
</Swiper>
</>
);
};
export default CarProductDetails;

我想渲染每个图像从数据图像数组作为一个新的SwiperSlide

我找到的解决方案是为每个图像写下SwiperSlide并在其中添加索引。

<SwiperSlide>
<img src={thisProduct.image[0]} />
</SwiperSlide>
<SwiperSlide>
<img src={thisProduct.image[1]} />
</SwiperSlide>
<SwiperSlide>
<img src={thisProduct.image[2]} />
</SwiperSlide>
<SwiperSlide>
<img src={thisProduct.image[3]} />
</SwiperSlide>

它实际上工作，但如果我有不同数量的图像在我的数据文件中的每个对象(obj1 - 5图像，obj2 - 6图像?

这个问题最好的解决方案是什么?

Answer 1

我想你可以这样做，映射到thisProduct并构建SwiperSlide的

<Swiper
onSwiper={setThumbsSwiper}
spaceBetween={5}
slidesPerView="4"
freeMode={true}
watchSlidesProgress={true}
allowTouchMove={false}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{thisProduct.map((product) => (
<SwiperSlide>
<img src={product} />
</SwiperSlide>
))}
</Swiper>;

注意:在map内部的<SwiperSlide>中添加一个唯一的key道具

Answer 2

可以使用.map函数。它循环遍历你的数组并返回一个数组作为结果。

同样重要的是要知道当你返回你的UI元素时，你应该为每个元素指定一个唯一的键以便告诉react哪些元素被改变了，还有一些你可以在这里读到的东西

所以希望它有帮助:

<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
loop={true}
spaceBetween={10}
navigation={true}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{
thisProduct.image.map((image, _index) => (
<SwiperSlide key={_index}>
<img src={image} />
</SwiperSlide>  
))
} 
</Swiper>

作为一个建议，给你所有的id相同的类型，而不是一个字符串和一个数字。