使用盖茨比图像的怪异行为

如何解决使用盖茨比图像的怪异行为

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

Competences.json

{
  "languages": [
    {
      "img": "JS.png","title": "Javascript","text": ""
    },{
      "img": "Node.png","title": "Node.js",{
      "img": "Typescript.png","title": "Typescript",{
      "img": "Html.png","title": "HTML",{
      "img": "Css.png","title": "CSS","text": "I have a "
    },{
      "img": "java.png","title": "Java",{
      "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",{
      "img": "Express.png","title": "Expressjs",{
      "img": "Gatsby.png","title": "GatsbyJS","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图像可以毫无问题地加载图像。

这每次都会发生。我编辑了一些内容，热加载失败，我重新加载了页面，然后工作正常。

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

解决方法

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