React，gatsbyjs：遍历对象 - 组件未呈现

Question

我在 Gatsbyjs 项目中有以下组件：

styleItem.js

import React from 'react'
import styled from 'styled-components'
import BackgroundImage from 'gatsby-background-image'
import {StaticQuery, graphql } from "gatsby"
import {Col } from 'react-bootstrap'

import '../styles/styles.css'

const StyleItem = (props) => {
    return (
        <StaticQuery 
            query={graphql`
                query {
                    street: file(relativePath: { eq: "2.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                    casual: file(relativePath: { eq: "3.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                    athletic: file(relativePath: { eq: "3.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
            `}

            render={data => { Object.keys(data).map((image, i ) => {

                    console.log(props.stylesItem[image].name)
                    console.log(image)
                    return (
                        <Col md={4}>
                            <div class="style-box">
                                <StyledBackgroundImage
                                    Tag="div"
                                    className="style-box-img"
                                    fluid={data[image].childImageSharp.fluid}
                                >
                                </StyledBackgroundImage>
                                <div class="style-text-box">
                                    <h5 class="h5">{props.stylesItem[image].style}</h5>
                                    <h3 class="h3 style-description">{props.stylesItem[image].name}</h3>
                                    <div class="extra-style-details">
                                        <p class="style-short-desc">{props.stylesItem[image].tagline}</p>
                                        <p>{props.stylesItem[image].text}</p>
                                        <ul class="hashtag-list">
                                            <li class="style-attribut"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        )
                    })
                }
            }
        />
    )
}

export default StyleItem

const StyledBackgroundImage = styled(BackgroundImage)`
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
`

我将以下道具传递给此组件（abc 虚拟字符串以获得更好的可读性）：

    stylesItem: {
            street: {
                style: "// STREET",
                name: "THE CANVAS",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc"
                ]
            },
            casual: {
                style: "// CASUAL",
                name: "THE CLASSIC",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc", "abc", "abc"
                ]
            },
            athletic: {
                style: "// ATHLETIC",
                name: "THE PERFORMER",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc", "abc", "abc"
                ]
            }
        }

我正在使用 Gatsby 的 Staticquery 加载 3 幅图像（街头、休闲、运动），并希望在第二个 return 语句中渲染该部分 3 次（每幅图像 1 次），每次使用动态加载的背景图像以及内容。

2 console.log() 语句按预期打印。

console.log(props.stylesItem[image].name)
console.log(image)

THE CANVAS
street
THE CLASSIC
casual
THE PERFORMER
athletic

但是屏幕上没有任何内容，我也没有看到任何错误。我究竟做错了什么？

在此先感谢您的帮助

Answer 1

您在 StaticQuery 上的 render prop 没有 return 任何东西，因此不会渲染任何东西。

在 StaticQuery 渲染道具中，您正在映射查询数据的键，然后成功生成一堆 JSX。但是请注意，您实际上并没有对它做任何事情，因为生成的 JSX 没有得到 returned.

所以整个 StyleItem 组件做了一堆工作然后不渲染任何东西，因为它唯一渲染的是 StaticQuery.

const StyleItem = ({ stylesItem }) => {
  return (
    <StaticQuery
      query={graphql`
        query {
          street: file(relativePath: { eq: "1.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
          casual: file(relativePath: { eq: "2.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
          athletic: file(relativePath: { eq: "3.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      `}
      render={data => {
        // Make sure to return something here
        return Object.keys(data).map(imageTitle => {
          const fluidProp = data[imageTitle].childImageSharp.fluid
          const imageData = stylesItem[imageTitle]
          return (
            <>
              <StyledBackgroundImage
                Tag="div"
                className="style-box-img"
                fluid={fluidProp}
              ></StyledBackgroundImage>
              <div>
                <h5>{imageData.style}</h5>
                <h3>{imageData.name}</h3>
                <p>{imageData.tagline}</p>
                <p>{imageData.text}</p>
              </div>
            </>
          )
        })
      }}
    />
  )
}

与Arrow functions毫无价值的是

when the only statement in an arrow function is return, we can remove return and remove the surrounding curly brackets

(param1, param2, …, paramN) => expression  
// equivalent to: => { return expression; }

所以上面 StaticQuery 上的 render prop 可以进一步简化为：

render={data =>
  Object.keys(data).map(imageTitle => {...})
}

React，gatsbyjs：遍历对象 - 组件未呈现

React, gatsbyjs: Looping through object - Component doesn't get rendered

javascript

reactjs

gatsby

gatsby-image