Gatsby应用程序中的钩子和多个反应实例

Question

我试图在useState中使用GatsbyJS中的一个简单的函数组件，但是在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>
    )
}

我得到以下错误：

无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React和呈现器的版本不匹配(例如React )。
2. 你可能违反了胡克斯的规则
3. 您可能在同一应用程序中有多个React副本，请参阅编辑的代码以平息此问题，因此有关如何调试和修复此问题的技巧，请参见错误。

因此，我阅读了这个Facebook/React页面上的错误，并确定我的react-dom版本是>16.8.0 (我使用的是^16.13.1)。我的反应是一样的。

我很确定我的组件函数没有什么问题(我基本上是从文档中复制了这个例子)。

第三件事，我怀疑是问题，是多个版本的反应同时运行。当我运行npm ls react时，我得到：

+-- gatsby@2.24.73
| `-- gatsby-cli@2.12.107
|   `-- react@16.13.1  deduped
`-- react@16.13.1

我试着将react和react-dom移到peerDependencies，就像这一反应在my `package.json中的这一反应那样，但这并没有解决问题，例如：

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

我还尝试根据GATSBY_HOT_LOADER = “fast-refresh”在.env.development文件中添加这个盖茨比线程变量，但问题仍然存在。

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

我使用盖茨比已经有一段时间没有问题了，所以我对这个错误感到惊讶。我怀疑这与Gatsby运行React的版本有关，尽管"deduped"，还有另一个版本的React也在运行，就像我运行npm ls react时看到的那样。

我能从这里去哪里？

谢谢,

Answer 1

因此，我最终重新开始并下载了我正在使用的gatsby启动器的一个新副本，这解决了这个问题。

我想，当我试图在某个时候安装一个插件时，我无意中安装了react和react-dom，并且运行了多个版本的versions (一个在gatsby中)，另一个安装在我的项目中的其他地方，引起了这个问题。

Answer 2

我还使用了React@16.13.1。值得注意的是，盖茨比启动器目前只使用React@16.12.1。最后，我在“盖茨比光谱”上找到了杰里米·奥尔布赖特的回答，指出这可能与react-hot-loader被反对有关。

盖茨比已经有了对fast-refresh的支持，您只需启用标志。

对我起作用的修复方法是将GATSBY_HOT_LOADER=fast-refresh添加到.env文件中。

来源