Reactjs Gatsby应用程序中React的挂钩和多个实例

我试图在GatsbyJS中的一个简单函数组件中使用

useState

，但是我在React中遇到了一个看似常见的错误

我的精简组件：

import React, { useState } from 'react';

export default function Header () {
    const [isOpen, toggleOpen] = useState(false);
    return ( 
        <header>
            <button onClick={() => toggleOpen( !isOpen )}>Click Me</button>
        </header>
    )
}

我尝试在我的“package.json”中将

react

和

react dom

移动到

peerDependencies

，根据从，但这并没有解决问题，例如：

"peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }

我还尝试根据在

.env.development

文件中添加一个

GATSBY\u HOT\u LOADER=“fast refresh”

var，但问题仍然存在

require("dotenv").config({
    path: `.env.${process.env.NODE_ENV}`,
}) 

这是我的package.json

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "gatsby": "^2.24.73",
    "gatsby-image": "^2.4.21",
    "gatsby-plugin-sass": "^2.3.16",
    "gatsby-plugin-sharp": "^2.6.40",
    "gatsby-source-filesystem": "^2.3.34",
    "gatsby-transformer-sharp": "^2.5.17",
    "hamburgers": "^1.1.3",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "^4.1.2",
    "prettier": "2.1.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

和环境信息：

System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.24.73 => 2.24.73
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-sass: ^2.3.16 => 2.3.16
    gatsby-source-filesystem: ^2.3.34 => 2.3.34

我使用盖茨比已经有一段时间了，所以我对这个错误感到惊讶。我怀疑这与盖茨比运行React的一个版本有关，尽管它是“重复数据消除的”，而另一个版本的React也在运行，正如我运行

npm ls React

时所看到的那样

我能从这里走到哪里

---

谢谢，

所以我重新开始并下载了我正在使用的盖茨比起动器的新版本，这就解决了问题

---

我想我无意中安装了

react

和

react dom

，当时我正试图在某个点安装一个插件，并且有多个版本的react正在运行（一个在gatsby内），另一个版本安装在我的项目中的其他地方，这就造成了问题。

我也在使用React@16.13.1. 值得注意的是，盖茨比起动器目前只使用React@16.12.1. 我最终在盖茨比频谱上找到了杰里米·奥尔布赖特的答案，他指出这可能与

react hot loader

被弃用有关

盖茨比已经支持

快速刷新

，您只需启用标志即可

对我有效的修复方法是将

GATSBY\u HOT\u LOADER=fast refresh

添加到我的

.env

文件中

---

您是否创建了最小回购协议来重现错误？这种东西很难单独调试代码：/我已经开始了新的安装，到目前为止还没有收到错误，所以我正在检查我的步骤，如果我发现了什么，我会更新我的帖子。干杯。嘿，谢谢，我也看到了杰里米在盖茨比频谱聊天中的评论，但实际上对我没有任何帮助。不知道为什么或者我们是否面临同样的问题，但很高兴你找到了解决问题的方法。也许在你的帖子中包含聊天的链接？@DavidGaskin很抱歉听到这没有帮助。聊天室的链接在我帖子底部的“来源”下有超链接。干杯

System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.24.73 => 2.24.73
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-sass: ^2.3.16 => 2.3.16
    gatsby-source-filesystem: ^2.3.34 => 2.3.34