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

Question

我有一个 next 应用程序。应用程序本身的代码(pages、static 等)位于 repo 的一个文件夹中。称为前端。该应用程序。本身是通过 repo 中的另一个文件夹通过 express 服务器提供的。称为后端。

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

我还通过 /graphql 端点在后端 express 服务器上运行 ApolloServer。该应用程序。工作正常，直到我尝试使用 react 钩子(Hook)实现一个组件。即 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。

您可能违反了 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-dom 通过 react-apollo。

检查 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 的多个副本？这对我来说不是任何其他基于 react 的问题。

编辑:

为了希望有所帮助，我创建了各自的 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@0.0.1 [directory]
└── react@16.8.5

npm ls react - 后端与上面相同。

Answer 1

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

而不是在每个前端和后端都有一个单独的package.json和package-lock.json code> 文件夹 我现在在根文件夹中有一个 package.json 和 package-lock.json (以及一个 node_modules 文件夹) .

我不知道为什么这会解决这个问题，正如我在上面的问题中所概述的那样，我所有的 react 和 react-dom 版本似乎彼此一致并且我正确地使用了钩子(Hook)。

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

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