接收错误 - 实现 React Spring 基本示例时，只能在函数组件的主体内部调用挂钩

Question

我有一个 next 应用程序。应用程序本身的代码（pages、static 等）位于存储库的一个文件夹中。称为 frontend。该应用程序。本身是通过 express 服务器通过 repo 中的另一个文件夹提供的。称为 backend.

首先，我不确定将这两者分开是否是最佳做法，但我个人喜欢这样做。这两个文件夹都有各自的 package.json 和 package-lock.json 文件。

我也通过 /graphql 端点在后端快速服务器上运行 ApolloServer。该应用程序。工作正常，直到我尝试使用反应钩子实现一个组件。即very simple example provided by react-spring如下图：

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

我已将其从 App 重命名为 SpringDemo，它在页面组件中的调用方式如下：

function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home

通过 backend 文件夹中的 express 服务器提供我的应用程序时，我在浏览器中收到以下错误：

Invariant Violation: 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

您的 React 和渲染器版本可能不匹配（例如 React DOM）

根据我各自的 package.json 文件，我认为情况并非如此：

frontend/package.json

    "react": "^16.8.5",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.5",

backend/package.json

    "react": "^16.8.5",
    "react-dom": "^16.8.5",

所有版本似乎最晚匹配 16.8.5。

你可能违反了 Hook 规则

不太可能使用 react-spring 文档中的复制粘贴示例。

您可能在同一个应用程序中有多个 React 副本

根据上面列出的 package.json，我不相信我会，但我不确定。我读了这个 https://github.com/facebook/react/issues/14823 issue, which then pointed me to this https://github.com/apollographql/react-apollo/issues/2792 但我不能确定这就是原因。查看 package-lock.json 文件并不能说明（至少对我而言）我是否确实运行通过 react-apollo 的 react/react-dom 的不同版本。

正在检查 react-apollo 存储库中的 package.json。此处：https://github.com/apollographql/react-apollo/blob/master/package.json 表示它们运行与 react 和 react-dom 的版本相同，但与我的 react 和 react-dom 版本不同如上所列：

react-apollo/package.json

    "react": "16.8.4",
"react-dom": "16.8.4",

我也不知道这是否符合我的 react-apollo 版本，或者这是否确实是导致此问题的原因。

如何解决这个问题并确定我是否确实是运行 react/react-dom 的多个副本？这对我来说不是任何基于反应的问题。

编辑:

为了希望有所帮助，我创建了各自 package.json 和 package-lock.json 文件的要点：

frontend/package.json - https://gist.github.com/benlester/c7d82d7ad46cae9b8972284baba003a6

frontend/package-lock.json - https://gist.github.com/benlester/8f85b3fa290e67445ee0b2df365d8307

backend/package.json - https://gist.github.com/benlester/0c8004bdbb5b87c50734ba8044c35cee

backend/package-lock.json - https://gist.github.com/benlester/29f7a25f2ee633a13bdbdcee28270ddf

npm ls react - frontend

frontend@0.0.1 [directory]
└── react@16.8.5

npm ls react - 后端同上。

Answer 1

我通过更改项目结构设法解决了这个问题。

我现在在 frontend 和 backend 文件夹中有一个单独的 package.json 和 package-lock.json，现在只有一个 package.json 和 package-lock.json 在根文件夹中（以及一个 node_modules 文件夹）。

我不知道为什么这可以解决问题，正如我在上面的问题中所概述的那样，我的所有 react 和 react-dom 版本似乎彼此对齐并且我正确使用了挂钩。

我也不是特别喜欢这个解决方案，因为它迫使我（至少在单个存储库中）使用单一来源来实现前端和后端依赖项。

如果有人知道管理 frontend/backend 混合部门的更好方法。我洗耳恭听。

接收错误 - 实现 React Spring 基本示例时，只能在函数组件的主体内部调用挂钩

Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example

javascript

reactjs

apollo

react-apollo

react-hooks