无效钩子调用博览会

Question

我正在创建一个monorepo来存储一个项目的web应用程序和世博应用程序。我已经安装了使用https://github.com/altick/cra-expo-monorepo。我已经创建了一个共享文件夹来存储公共代码。我面临一个导入react组件的问题，该组件使用了一个钩子到世博应用程序中，它给出了以下错误

Error: 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我在react应用程序中也遇到了同样的问题，我发现它是由多个react副本造成的(包括应用程序和共享的)，但我通过更新webpack配置来解决这个问题，并通过webpack别名使用了这些应用程序。然而，我不知道如何实现同样的世博。

示例组件

import React,{useState} from "react";

export const Dummy = () => {
    const [data, setData] = useState("Test");
    return <>{data}</>
}

我想知道如何解决这个问题

Answer 1

不能在主功能之外使用function钩子。我非常肯定您将const ()函数放在主函数之外。

import React,{useState} from "react";

export const Dummy = () => {
    const [data, setData] = useState("Test");
    return <>{data}</>
}

export default function SomeMainFunction() {
  ...
}

请按以下方式更改上述功能。

import React,{useState} from "react";

export default function SomeMainFunction() {

  export const Dummy = () => {
    const [data, setData] = useState("Test");
    return <>{data}</>
  }

   ...
}