如何在React中创建和返回文本数组?

Question

所以我正在制作一个带有图像的旋转木马，并希望还包括相应的文本。已经成功地映射通过我的图像数组，但我的文本数组不那么成功。这是100%的语法错误，因为我是瞎猜的。我该怎么做呢?

TEXT/IMAGE ARRAY
import image1 from "../img/breakfast.jpg" ;
import image2 from "../img/burger.jpg";
import image3 from "../img/curry.jpg";
import image4 from "../img/dessert.jpg";
import image5 from "../img/italian.jpg";
import image6 from "../img/kebab.jpg";
import image7 from "../img/sushi.jpg";
import image8 from "../img/pizza.jpg";
import image9 from "../img/roast.jpg";
import image10 from "../img/greek.jpg";
import image11 from "../img/healthy.jpg";
export default [image1, image2, image3, image4, image5,
image6, image7, image8, image9, image10, image11 ]


const cuisine1 = "Breakfast";
const cuisine2 = "Burger";
const cuisine3 = "Indian";
const cuisine4 = "Dessert";
const cuisine5 = "Italian";
const cuisine6 = "Kebab";
const cuisine7 = "Sushi";
const cuisine8 = "Pizza";
const cuisine9 = "Roast";
const cuisine10 = "Greek";
const cuisine11 = "Healthy";
export const cuisineString=[
{
cuisine: cuisine1
},
{
cuisine: cuisine2
},
{
cuisine: cuisine3
},
{
cuisine: cuisine4
},
{
cuisine: cuisine5
},
{
cuisine: cuisine6
},
{
cuisine: cuisine7
},
{
cuisine: cuisine8
},
{
cuisine: cuisine9
},
{
cuisine: cuisine10
},
{
cuisine: cuisine11
}
] 
CAROUSEL FUNCTIONALITY
import {motion} from "framer-motion";
import {useRef, useEffect, useState} from "react";
import image from "../img/carouselArray"
import {cuisineString} from "../img/carouselArray"
import "../style/home.css";
export const Carousel = () => {
const [width, setWidth] = useState(0);
const carousel = useRef();
useEffect(() => {
// console.log(carousel.current.scrollWidth, carousel.current.of
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
}, []);
return (
<div className="carouselContainer">

<motion.div ref={carousel} className="carousel" whileTap={{cursor: "grabbing"}}>
<motion.div drag="x"
dragConstraints= {{ right: 0, left: -width}}
className ="innerCarousel">
{image.map(image =>{
return(
<motion.div className="item" key={image}>
{/* <h5>Cuisine</h5> */}
<a href=""><img className="itemImg" src={image} alt="Cuisine"/></a>
</motion.div>
);
})}
{cuisineString.map(index =>{
return(
<motion.div className="item" key={index}>
<h5>{index}</h5>
{/* <a href=""><img className="itemImg" src={image} alt="Cuisine"/></a> */}
</motion.div>
);
})}
</motion.div>
</motion.div>


</div>

);
}

更新:找到了一个解决方案，将在

下面插入代码片段

Two Seperate arrays for images and strings: 
import image1 from "../img/chinese.jpg" ;
import image2 from "../img/burger.jpg";
import image3 from "../img/italian.jpg";
import image4 from "../img/indian.jpg";
import image5 from "../img/kebab.jpg";
import image6 from "../img/sushi.jpg";

export default [image1, image2, image3, image4, image5,
image6]

const cuisine1 = "Chinese";
const cuisine2 = "American";
const cuisine3 = "Italian";
const cuisine4 = "Indian";
const cuisine5 = "Turkish";
const cuisine6 = "Japanese";
export const cuisineString=[
{
cuisine: cuisine1
},
{
cuisine: cuisine2
},
{
cuisine: cuisine3
},
{
cuisine: cuisine4
},
{
cuisine: cuisine5
},
{
cuisine: cuisine6
}
] 

Mapped through them seperalty, styled in css so that titles appeared above images. Anchor tag now working on the image. 
import {motion} from "framer-motion";
import {useRef, useEffect, useState} from "react";
import image from "../img/carouselArray"
import {cuisineString} from "../img/carouselArray"
import "../style/home.css";
export const Carousel = () => {
const [width, setWidth] = useState(0);
const carousel = useRef();
useEffect(() => {
// console.log(carousel.current.scrollWidth, carousel.current.of
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
}, []);
return (
<div className="carouselContainer">

<motion.div ref={carousel} className="carousel" whileTap={{cursor: "grabbing"}}>
<motion.div drag="x"
dragConstraints= {{ right: 0, left: -width}}
className ="innerCarousel">
<div className="caroselRow">
{image.map(image =>{
return(
<motion.div className="item" key={image}>
{/* <h5>Cuisine</h5> */}
<button className="btnImage"><a href=""><img className="itemImg" src={image} alt="Cuisine"/></a></button>
</motion.div>

);
})}
</div>
<div className="caroselRow">
{cuisineString.map(({cuisine})=>{
return(
<motion.div className="itemTitle">
<p className="itemTitleReturn" key={cuisine}>{cuisine}</p>
</motion.div>
);
})}
</div>
</motion.div>
</motion.div>


</div>

);
}

Answer 1

你试过了吗

{images.map((image , index) =>{
return(
<motion.div className="item" key={image}>
{cuisine[index]}
<a href="/"><img className="itemImg" src={image} alt="Cuisine"/></a>
</motion.div>
);
})}

Answer 2

你的方法不对。与其这样做，不如创建一个对象数组。例如

const carouselArray = [
{
"image": image1,
"cuisine": cuisine1
},
{
"image": image2,
"cuisine": cuisine2
}{
"image": image3,
"cuisine": cuisine3
}{
"image": image4,
"cuisine": cuisine4
}
]

然后

{carouselArray.map((item , index) =>{
return(
<motion.div className="item" key={item.image}>
{item.cuisine}
<a href="/"><img className="itemImg" src={item.image} alt="Cuisine"/></a>
</motion.div>
);