无效的挂钩调用。钩子只能在函数组件的主体内部调用，错误仅发生在浏览器中而不是移动设备上

Question

无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因之一可能是：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 中拥有多个 React 副本

您可能在同一个应用程序 当我尝试使用 Expo CLI 提供的相机 API 拍照时出现此错误。我的实际问题是，它在我的 Android 设备上运行没有任何错误，但是每当我在浏览器（即 React DOM）上运行该应用程序时，它都会在控制台中产生此错误。

这是我从 expo doc 复制的代码，

import { Camera } from "expo-camera";
import { useEffect, useState } from "react";

const TakeImage = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}
          >
            <Text style={styles.text}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
};

Answer 1

你不能在另一个钩子中使用一个钩子，因为它违反了从 React 函数组件调用 Hooks 的规则，并且你传递给 useEffect 的函数是一个常规的 javascript 函数。您可以做的是在另一个自定义挂钩中调用一个挂钩，如下所示：

您的代码：

useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

更改为：

useEffect(() => {
    checkPermissions();
  }, []);

const checkPermissions = async () => {
    const {status} = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === 'granted');
  };