javascript - 如何处理 jsx for gatsby 中 graphql 查询的空结果？

Question

我在模板文件中有一个 graphql 查询，它为某些页面提供 null。我该如何处理这而不是类型错误？

graphql 查询:

export const query = graphql`
    query(
            $cat: String!,
            $regexCat: String!
        ) 
    {
        products: allWarenlisteCsv(filter: {Warengruppe: {eq: $cat}}) {
            edges {
              node {
                Artikelnummer
                Artikelbeschreibung
                Bemerkungen
                Preis
                Grafik
              }
            }
        }
        categories: allWarenlisteCsv(filter: {Warengruppe: {regex: $regexCat}}) {
            distinct(field: Warengruppe)
        }
        imagemap: imagemapsCsv(Warengruppe: {eq: $cat}) {
            Warengruppe
            image
            map
        }
    }
`

图像映射返回:

{
  "data": {
    "imagemap": null
  }
}

对于大多数页面。

然后我得到

TypeError: imagemap is null

我试图在 jsx 中像这样处理它，但不起作用:

 { imagemap !== 'undefined' &&
            <div>
                <img src={ "/images/image_maps/" + imagemap.image } usemap="#map" alt="Explosionszeichnung"></img>
                <map name="map" dangerouslySetInnerHTML={{__html: imagemap.map}} />
            </div>
 }

(图像稍后将由 gatsby-image 处理)

Answer 1

您正在检查是否imagemap是undefined - 不是 null .

你应该做 imagemap !== null , 但写成 { imagemap && <div>...</div> } 会更容易

这将检查 null和 undefined .另见 Understanding JavaScript Truthy and Falsy