使用 gatsby 图像的奇怪行为

Question

在我的 gatsby 应用程序中，我有以下 json 文件：

Competences.json

{
  "languages": [
    {
      "img": "JS.png",
      "title": "Javascript",
      "text": ""
    },
    {
      "img": "Node.png",
      "title": "Node.js",
      "text": ""
    },
    {
      "img": "Typescript.png",
      "title": "Typescript",
      "text": ""
    },
    {
      "img": "Html.png",
      "title": "HTML",
      "text": ""
    },
    {
      "img": "Css.png",
      "title": "CSS",
      "text": "I have a "
    },
    {
      "img": "java.png",
      "title": "Java",
      "text": ""
    },
    {
      "img": "Csharp.png",
      "title": "C#/ASP.NET Core",
      "text": ""
    }
  ],
  "frameworks": [
    {
      "img": "react.png",
      "title": "React",
      "text": "I have extensive knowledge in React and have used it for most of my personal projects. I have for example built this page using Gatsby.js which is based on React"
    },
    {
      "img": "Angular.png",
      "title": "Angular",
      "text": ""
    },
    {
      "img": "Express.png",
      "title": "ExpressJS",
      "text": ""
    },
    {
      "img": "Gatsby.png",
      "title": "GatsbyJS",
      "text": ""
    }
  ],
  "versionControl": [
    {
      "img": "git.png",
      "title": "Git",
      "text": ""
    }
  ]
}

我在以下组件中使用这个 json 文件：

Competences.js

import React from "react"
import Card from "../Card/Card"
import { useStaticQuery, graphql } from "gatsby"
import CompetencesJSON from "../../../static/Competences/Competences.json"


export default function Competences() {
  const data = useStaticQuery(graphql`
    query competences {
      allCompetenceImages: allFile(filter: { relativeDirectory: { eq: "Competences" } }) {
        nodes {
          id
          base
          childImageSharp {
            fixed(height: 100) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  `)

  Object.keys(CompetencesJSON).forEach((k,i) => {
    CompetencesJSON[k] = CompetencesJSON[k].map(c => {
      const { id, childImageSharp } = data.allCompetenceImages.nodes.find(
        node => c.img === node.base
      )



      return (
        <Card
          key={id}
          text={c.text}
          title={c.title}
          img={childImageSharp.fixed}
          skillLvl={Math.random()*100}
        />

      )
    })
  })

  return (
    <section id="competences" className={styles.competences}>
      <HeadingThree black>Technologies / Programming Langauges</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.languages}</div>
      <HeadingThree black>Frameworks / Libraries</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.frameworks}</div>
      <HeadingThree black>Version Control</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.versionControl}</div>
    </section>
  )
}

由于某种原因，每次我运行开发服务器然后触发热重载（通过编辑代码）时都会出现错误

但是当我重新加载页面时，错误消失了，一切正常，gatsby image 可以毫无问题地加载图像。

这种情况每次都会发生。我编辑了一些东西，热重新加载失败，我重新加载页面，然后它工作正常。

这在开发过程中当然很烦人，我想知道是否有人知道为什么会发生这种情况。

Answer 1

您在 Competences 组件的每个渲染上修改 CompetencesJSON。第一个渲染用单个 React 节点替换每个对象字面量数组。第二个渲染假定每个索引处的内容仍然是一个数组，但它是一个 React 节点。