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

Question

无效的 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一:

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

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

您的代码:

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

更改为:

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

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