根据 JSON 响应创建轮播

Question

我收到来自服务器的 JSON 响应，如下所示：

{
    "value_1": "a",
    "value_2": "b",
    "pagination": {
        "titles": [
            "Title 1",
            "Title 2",
            "Title 3",
            "Title 4",
            "Title 5"
        ]
    },
    "slides": [
        {
            "pagination_id": 0,
            "content": {
                "heading": "Welcome!",
                "description": "Stuff goes here",
                "image": {
                    "url": "<image_url>",
                    "alt": "alternative text"
                },
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 1,
            "content": {
                "heading": "About",
                "description": "Stuff goes here",
                "image": {
                    "url": "<image_url>",
                    "alt": "alternative text"
                },
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 2,
            "content": {
                "heading": "Welcome!",
                "description": "Stuff goes here",
                "groups": [
                    {
                        "id": 1,
                        "label": "Group 1"
                    },
                    {
                        "id": 2,
                        "label": "Group 2"
                    },
                    {
                        "id": 3,
                        "label": "Group 3"
                    }
                ],
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 3,
            "heading": "Welcome!",
            "description": "Stuff goes here",
            "image": {
                "url": "<image_url>",
                "alt": "alternative text"
            },
            "back": {
                "label": "Back"
            },
            "next": {
                "label": "Next"
            }
        },
        {
            "pagination_id": 4,
            "heading": "Welcome!",
            "description": "Stuff goes here",
            "image": {
                "url": "<image_url>",
                "alt": "alternative text"
            },
            "back": {
                "label": "Back"
            },
            "next": {
                "label": ""
            }
        }
    ],
    "footer": {
        "legal": {
            "label": "Legal",
            "url": "<url>"
        },
        "privacy": {
            "label": "Privacy",
            "url": "<url>"
        },
        "cookies": {
            "label": "Cookies",
            "url": "<url>"
        }
    }
}

正如您可能知道的那样，此数据用于创建轮播，每张幻灯片都显示幻灯片内容。我遇到的问题是幻灯片标题来自 JSON 的 pagination 部分，但包括下一步和后退按钮在内的实际幻灯片内容来自 slides 部分。

目前我遇到了一些问题：

我需要为每张幻灯片获取正确的标题。
我需要根据每张幻灯片中存在的 next 和 back 属性呈现按钮。
当单击按钮前进或后退时，我需要跟踪应该显示的幻灯片。

我已经知道我需要为第 1 部分做的是使用幻灯片的 pagination_id 从 pagination.titles 数组中获取正确的标题，但我不确定最好的解决这个问题的方法。

对于第二部分，我认为也应该可以使用 pagination_id 来跟踪当前幻灯片（我认为），但我不确定我该如何处理。我应该提到每张幻灯片的按钮将根据每张幻灯片的 next 和 back 属性呈现。

这个应用程序是用 React 构建的，我目前只使用本地状态，因为我认为像 Redux 这样的东西真的不值得包含在如此少量的数据中。

如能帮助解决这个难题，我们将不胜感激，

感谢您的宝贵时间

Answer 1

在您的情况下，尽管数据来自不同的数组，但您可以兑现的是两个数组中的项目数量相同。因此，您可以只使用循环这些项目的数组的当前索引。所以它会像这样：

更新代码

return(
 data.slides.map((slide, index)=>{
  return <div key={index}>
   <h1> {data.pagination.titles[index]} </h1> // for title
   <img src={slide.content?.image?.url || slide.image.url} alt={slide.content?.image?.alt || slide.image.alt} />
   //for buttons
   {(slide.content?.previous || slide.previous) && <button onClick={()=> setCurrentSlideIndex((index - 1) % data.slides.length)}> {slide.content?.previous?.label || slide.previous.label} </button>}
   {(slide.content?.next || slide.next) && <button onClick={()=> setCurrentSlideIndex((index + 1) % data.slides.length)}> {slide.content?.next?.label || slide.next.label} </button>}
</div>
})
)

希望你明白了。

更新

但是，如果有很多事情要做，那么您可能需要创建一个函数，该函数将布尔值作为参数来告诉特定项目是否具有内容对象，并且 return ui 有条件地基于那个。像这样：

const renderSlide=(content, index)=>{
 if(content){
  return <div>
 // with slide.content.xyz
 <h1> data.pagination.titles[index] </h1>
<img src={data.slides[index].content.image.url}
 </div>
  }
else{
 return <div>
// with slide.xyz
<img src={data.slides[index].image.url}

</div>
}
}

并在你的函数中调用它：

return(
 data.slides.map((slide, index)=>{
 <>
  {renderSlide(slide.content, index)}
 <>
})

根据 JSON 响应创建轮播

Creating carousel from JSON response

arrays

json

carousel

reactjs