问题描述
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节点。