Javascript 在reactjs中渲染旋转木马

我有一个json模式，根据这个模式，我想显示滑块/旋转木马，因此如果json模式有3个对象，我想在ReactJS组件中渲染滑块3次，并在该对象的数组中以及在滑块/旋转木马中渲染图像

假设我的json中有3个对象，那么这个旋转木马应该呈现3次

import APIData from "../../data/api.json";
            <Carousel {...settings}>
              {APIData.map((data, index) => {
                data.images.map((images, index) => {
                  return <img key={index} src={images} alt={index} />;
                });
              })}
            </Carousel>

---

通过每个APIData项目循环，并返回带图像的旋转木马

     {
      APIData.map((data, index) => {
        return (
           <Carousel {...settings}>
             {data.images.map((images, index) => {
                return <img key={index} src={images} alt={index} />;
             });}
           </Carousel>
        )
      })
     }

{
APIData.map（（数据，索引）=>{
返回(
{data.images.map（（图像，索引）=>{
回来
});}
)
})
}

从“React”导入React；
从“../../data/api.json”导入APIData；
从“..”导入转盘；
导出默认类SimpleSlider扩展React.Component{
滑块（）{
返回APIData.map（{id，images}）=>{
返回(
{images.map（{image}）=>{
回来
});}
)
})
}
render（）{
返回(
{this.sliders（）}
);
}
}

我们的

APIData

是对象数组，对象结构如下

{
  "id": "DR001",
  ... fields,
  "images": [
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
  ],
}

我们需要用

Carousel

组件包装每个对象，因此首先我们在

APIData

数组上循环，该数组在每次迭代中为我们提供一个

对象

，然后，我们在该对象内部的

images

数组上循环，并为数组中的每个图像呈现带有图像源的

img

标记

// If all what we are doing is returning something from an arrow function
// we can omit the return statement and the {} and just wrap it in () or not wrap it
// at all but with () it is more readable
APIData.map(data => (
  <Carousel key={data.id} {...settings}>
    {data.images.map(imgSrc => (
      <img key={imgSrc} src={imgSrc} alt={data.propertyFullName} />
    ))}
  </Carousel>
));

---

请提供

json

的示例即使我返回它，它也只会呈现一个旋转木马，它会呈现两个图像，数组中每个对象一个？是！正是……在不同版本的代码中，它将用所有6张幻灯片垂直呈现2个旋转木马你不认为有必要重复

吗？你想要与数组

APIData

或旋转木马中的条目相同数量的旋转木马，或者在一个旋转木马中所有图像都应该在那里？我已经编辑了我的答案，请检查你的帮助这看起来是否干净尽快，你能给它添加一些解释吗？我已经添加了一个解释，希望它有帮助。谢谢，它确实很有帮助，在这之后改进了整个代码

{
  "id": "DR001",
  ... fields,
  "images": [
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
  ],
}

// If all what we are doing is returning something from an arrow function
// we can omit the return statement and the {} and just wrap it in () or not wrap it
// at all but with () it is more readable
APIData.map(data => (
  <Carousel key={data.id} {...settings}>
    {data.images.map(imgSrc => (
      <img key={imgSrc} src={imgSrc} alt={data.propertyFullName} />
    ))}
  </Carousel>
));

APIData.map((data, index) => {
  console.log(`Outer map iteration number ${index + 1}`);
  console.log('Outer map data', data);
  console.log('Inner map within the outer map');
  data.images.map(img => {
    console.log(img);
  });
});