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

Question

我有一个next应用程序。该应用本身（的代码pages，static等等）是在回购一个文件夹中。称为frontend。应用程序。本身通过expressrepo 中的另一个文件夹通过服务器提供服务。称为backend。

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

我还ApolloServer通过/graphql端点在后端快速服务器上运行。应用程序。工作正常，直到我尝试实现带有反应钩子的组件。即如下所示提供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>
}

我已将其从Appto重命名，SpringDemo并在页面组件中简单地调用它，如下所示：

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

export default Home

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

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。

你可能会违反 Hooks 规则

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

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

我不相信我这样做，从我package.json上面列出的但我不确定。我读了这个https://github.com/facebook/react/issues/14823问题，然后我指向了这个https://github.com/apollographql/react-apollo/issues/2792但我不能确定这就是原因。查看该package-lock.json文件并不能说明（至少对我而言）我是否确实在运行不同版本的react/ react-domvia react-apollo。

检查package.json的react-apollo回购。此处：https : //github.com/apollographql/react-apollo/blob/master/package.json表明它们运行的​​是相同版本的reactand 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

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

现在，我不再在每个和文件夹中都有一个单独的package.jsonand ，而是在根文件夹（以及一个文件夹）中拥有一个单独的and 。package-lock.jsonfrontendbackendpackage.jsonpackage-lock.jsonnode_modules

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

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

如果有人知道管理前端/后端混合部门的更好方法。我洗耳恭听评论。