反應，gatsbyjs：循環通過 object - 組件沒有被渲染

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 張圖像（街頭、休閑、運動），並希望在第二個返回語句中渲染該部分 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上的渲染道具不會返回任何內容，因此不會渲染任何內容。

在StaticQuery渲染道具中，您正在映射查詢數據的鍵，然后成功生成一堆 JSX。 但是請注意，您實際上並沒有對它做任何事情，因為沒有返回結果 JSX。

所以整個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>
            </>
          )
        })
      }}
    />
  )
}

---

箭頭函數毫無價值的是

當箭頭 function 中的唯一語句是return時，我們可以刪除return並刪除周圍的大括號

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

所以上面的StaticQuery渲染道具可以進一步簡化為：

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