У меня есть два запроса к GraphQL. Один выводит массив журнальных PDF-файлов. Другой выводит массив изображений, показывающих обложки журнала PDF. Я хочу создать галерею изображений, где, если я нажму на изображение, оно приведет пользователя к соответствующему журналу PDF, из которого было получено изображение.
Мои запросы GraphQL
export const query = graphql`
query {
pdfFile: allFile(filter: {extension: {eq: "pdf"}}) {
totalCount
edges {
node {
name
id
publicURL
}
}
}
pdfImg: allFile(filter: {extension: {in: "jpg"}, name: {regex: "/Cover/"}}) {
totalCount
edges {
node {
name
id
publicURL
}
}
}
}
`
Мои Идея заключалась в том, чтобы постепенно slice
через массив изображений. (0,1)
возвращает первое изображение, (1,2)
возвращает второе, (2,3)
возвращает третье и т. Д. c. Я думал, что циклическое изменение переменных в моем методе slice
выведет эти числовые приращения. Однако я возвращаю только последнее приращение (1,2)
в моем текущем массиве из 2 изображений, поэтому два разных PDF-файла совместно используют одно и то же изображение, возвращенное из slice
. Я упростил приведенный ниже код, чтобы показать только эту идею.
render() {
const imgs = this.props.data.pdfImg.edges
let prevImg = 0
let nextImg = 1
for (let i = 0; i < imgs.length; i++) {
prevImg = prevImg + i;
nextImg = nextImg + i;
}
return (
<Layout>
<a href={#}>
{imgs.slice(prevImg, nextImg).map(({ node }) => (
<img alt="magazine cover" className="categoryPostImg" src={node.publicURL} />
))}
</a>
</Layout>
)
}
Существует ли способ возврата каждой числовой пары значений (0,1)
, (1,2)
и т. Д. С prevImg
и nextImg
переменные через slice
?
Моя текущая проблема, когда я вывожу только (1,2)
, чтобы дважды показать одно и то же изображение, а не нужные (0,1)
и (1,2)
, чтобы показать два разных изображения.