Question

我在运行开发服务器时克隆了gatsby应用程序：

$ gatsby develop

我收到一个错误：

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app




  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for o  ne of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See react-invalid-hook-call for tips about how to debug and fix this problem.

  - react.development.js:1465 resolveDispatcher
    [New-webelight-gatsby]/[gatsby]/[gatsby-cli]/[react]/cjs/react.development.js:1465:13

  - react.development.js:1496 useState
    [New-webelight-gatsby]/[gatsby]/[gatsby-cli]/[react]/cjs/react.development.js:1496:20

  - context.js:17 StoreStateProvider
    [New-webelight-gatsby]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

  - react-reconciler.development.js:6036 renderWithHooks
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12


E:\Webelight\New-webelight-gatsby>

Answer 1

更新：看来将盖茨比升级到2.23.11可能已经解决了这个问题，但是我还没有进行自我测试。 comment

2020年10月：问题仍然存在于2.24.66

这似乎是一个持续进行的issue [截至2020年5月]

此问题归结为React和先前可能已在应用程序中安装的基础gatsby版本的不匹配。

React版本低于16.8.0似乎会导致此问题，而gatsby@2.19.18试图限制此影响-看来它并未完全合并为PR-{{ 3}}

一个简单的方法是

删除node_modules目录
删除package-lock.json
npm i

一种替代方法是使用npm update，但该期中的评论已产生结果

如何解决Gatsby中的<StoreStateProvider>错误？

1 个答案: