挂钩调用无效。钩子只能在函数组件的主体内部调用（react-native）

Question

错误：挂钩调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用程序中拥有多个 React 副本

我正在尝试在 React Native 中实现位置权限（我正在使用 expo CLI）

这是我已经创建的函数：

function OfferScreen({ navigation}: {navigation:any}) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);
  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });


      //GEOLOCATION TEST
      //STATE FOR GEOLOCATION
  const [location, setLocation] = useState < any | null > (null);
  const [hasPermission, setHasPermission] = useState < any | null > (null);
    useEffect(() => {
      (async () => {
          const {status} = await Location.requestForegroundPermissionsAsync();
          setHasPermission(status === "granted");
          let location = await Location.getCurrentPositionAsync({});
      })();
  }, []);
}
export default OfferScreen;

这是我标签栏中的目标函数

<Tab.Screen //TABSCREEN OFFER
                options={
                    {headerShown: false}
                }
                name={"Offres"}
                component={Offers}/>

顺便说一下，当我删除位置权限代码时工作正常。

Answer 1

React.useEffect() 中不能有 useState()。将这些语句移至 useEffect

的顶部和外部

function OfferScreen({ navigation }: { navigation: any }) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);

  //GEOLOCATION TEST
  //STATE FOR GEOLOCATION
  const [location, setLocation] = (useState < any) | (null > null);
  const [hasPermission, setHasPermission] = (useState < any) | (null > null);

  React.useEffect(() => {
    if (!loading && data) {
      (async () => {
        const { status } = await Location.requestForegroundPermissionsAsync();
        setHasPermission(status === "granted");
        let location = await Location.getCurrentPositionAsync({});
      })();
    }
  }, [data, loading]);

  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });
  }, []);
}

export default OfferScreen;

挂钩调用无效。钩子只能在函数组件的主体内部调用（react-native）

Invalid hook call. Hooks can only be called inside of the body of a function component (react-native)

javascript

react-native

npm

react-redux

expo