从 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 部分。

目前我有一些问题：

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

我已经知道我需要为第 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>
})
)

希望你能明白。

更新

但是，如果有很多事情发生，那么您可能需要创建一个函数，该函数将布尔值作为参数来告知特定项目是否具有内容对象，并根据条件返回 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)}
 <>
})