Reactjs &引用；钩子只能在函数组件的主体内部调用；反应本机和纱线工作区出错

我目前正在开发一个基于纱线工作区的项目。在react native中正确安装apollo一整天都有问题，最后，我通过更改metro.config.js文件的配置（我将其保留在下面，即使我认为它不会影响问题）成功地完成了安装。然而，当我开始实现@apollo/react-hooks库时，我遇到了以下错误：

钩子只能在函数组件的主体内部调用

在网上冲浪时，我遇到了其他类似的问题和官方的react文件，其中说：

There are three common reasons you might be seeing it:

- You might have mismatching versions of React and React DOM.
- You might be breaking the Rules of Hooks.
- You might have more than one copy of React in the same app.

我认为第二个选项被排除在外，因为我实现的代码非常简单，我认为不可能有错误。即使是第一个选项对我来说也是不可能的，因为我使用的是react native，因此我没有使用react DOM模块（如果我在这方面有错误，请为我的无知道歉）

最后一个选项是最受认可的选项。事实上，在检查两个node_modules文件夹（工作区根目录下的文件夹和移动应用程序包中的文件夹）时，我意识到“react”模块存在于两个目录中

通过尝试，我意识到只有在react本机应用程序的package.json文件中使用了“nojust”属性时，react模块才会安装两次。一旦我将react本机模块插入到“nojust”数组中，react也会安装在“local”node_modules文件夹中，也会安装在项目根目录下的文件夹中

  "workspaces": {
    "nohoist": [
      "react-native",   <---------
      "react-native/**",  <---------
      "@react-native-mapbox-gl",
      "@react-native-mapbox-gl/**",
      "react-native-gesture-handler",
      "react-native-gesture-handler/**",
      "react-native-reanimated",
      "react-native-reanimated/**",
      "@react-navigation",
      "@react-navigation/**",
      "react-native-safe-area-context",
      "react-native-safe-area-context/**",
      "react-native-vector-icons",
      "react-native-vector-icons/**",
      "react-native-pose",
      "react-native-pose/**",
      "@react-native-community",
      "@react-native-community/**",
      "react-native-elements",
      "react-native-elements/**"
    ]
  }

相反，这是错误产生的文件：

import React, {useState} from "react";
import {View, Text, Button} from "react-native";
import {StackScreenProps} from "@react-navigation/stack";
import {AuthStackParamList} from "../../../navigation";
import {useRegisterMutation} from "../../../generated/graphql";
import {InputText} from "../../../components/InputText";

type SignUpScreenProps = StackScreenProps<AuthStackParamList, "SignUp">;

export const SignUpScreen: React.FC<SignUpScreenProps> = ({navigation}) => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");


  const [signup] = useRegisterMutation();
  

  const handleSubmit = async () => {
    const {data, errors} = await signup({
      variables: {username, email, password},
    });
    console.log(data, errors);
  };

  return (
    <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
      <Text>SignUp</Text>
      <InputText
        label="Username"
        value={username}
        onChangeText={setUsername}
        textContentType="username"
      />
      <InputText
        label="Email"
        value={email}
        onChangeText={setEmail}
        textContentType="emailAddress"
      />
      <InputText
        label="Email"
        value={password}
        onChangeText={setPassword}
        textContentType="password"
        secureTextEntry
      />
      <Button title="Crea account" onPress={handleSubmit} />
    </View>
  );
};

---

你必须像这样使用

const [signup] = useMutation(useRegisterMutation)

请输入密码

import { useMutation } from '@apollo/react-hooks';

像这样使用

const [signup] = useMutation(useRegisterMutation)

现在你得打电话了

const handleSubmit = async () => {
    const {data, errors} = await signup({
      variables: {username, email, password},
    });
    console.log(data, errors);
  };

---

有关更多信息，请参见

非常感谢您对我的问题的关注，但是，我相信这不是错误的原因。由于我的错误，我忘了写我正在使用一个名为@graphql codegen/cli的包，它会自动为模式中定义的查询生成钩子。在这种情况下，“useRegisterMutation”函数是从一个文件中导入的，该文件随后自行生成。我也试着遵循你的方法，我继续收到同样的错误。

const handleSubmit = async () => {
    const {data, errors} = await signup({
      variables: {username, email, password},
    });
    console.log(data, errors);
  };