代码之家 › 专栏 › 技术社区 › khalil hajri

无效的钩子调用。钩子只能在函数组件的主体内部调用(react native)

expo react-redux npm react-native javascript

khalil hajri · 技术社区 · 2 年前

错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下:

React和渲染器的版本可能不匹配(例如React DOM)
你可能违反了钩子的规则
同一个应用程序中可能有多个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}/>

顺便说一句,当我删除位置许可代码时,效果很好。

1 回复 | 直到 2 年前

Satya S 2 年前

你不可能 useState() 在一个 React.useEffect() . 将这些语句移到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;