为什么我会收到“可能的未处理的承诺拒绝（id：0）：”控制台警告以及如何摆脱它

Question

我正在尝试请求并获取用户的位置。这是我的代码。我试图做到这一点，以便用户一进入该屏幕，就要求他给出自己的位置，因此使用了 useEffect。

我在另一个屏幕上做了类似的事情来访问用户的图片库，但只有当用户按下某个按钮时才会调用 AccessLocation 函数的等效项，并且不会引发该错误。

useEffect 中的语法或调用函数的方式是否有所不同？我还在学习 React，所以放轻松吧。

import { View, Text } from "react-native";
import React, { useEffect, useState } from "react";

export default function DateFinder() {
  const [hasForegroundPermissions, setHasForegroundPermissions] =
    useState(null);
  const [userLocation, setUserLocation] = useState(null);

  useEffect(() => {
    const AccessLocation = async () => {
      function appSettings() {
        console.warn("Open settigs pressed");
        if (Platform.OS === "ios") {
          Linking.openURL("app-settings:");
        } else RNAndroidOpenSettings.appDetailsSettings();
      }

      const appSettingsALert = () => {
        Alert.alert(
          "Allow Wassupp to Use your Location",
          "Open your app settings to allow Wassupp to access your current position.",
          [
            {
              text: "Cancel",
              onPress: () => console.warn("Cancel pressed"),
            },
            { text: "Open settings", onPress: appSettings },
          ]
        );
      };

      const foregroundPermissions =
        await Location.requestForegroundPermissionsAsync();
      if (
        foregroundPermissions.canAskAgain == false ||
        foregroundPermissions.status == "denied"
      ) {
        appSettingsALert();
      }
      setHasForegroundPermissions(foregroundPermissions.status === "granted");
      if (hasForegroundPermissions == true) {
        const location = await Location.getCurrentPositionAsync({
          accuracy: Location.Accuracy.Highest,
        });
      }
    };

    AccessLocation();
  });

  return (
    <View>
      <View>
        <Text>"Home, sweet home"</Text>
      </View>
    </View>
  );

  const styles = StyleSheet.create({
    background: {
      backgroundColor: COLORS.background_Pale,
      flex: 1,
      // justifyContent: "flex-start",
      //alignItems: "center",
    },
    image: {
      flex: 1,
      // height: null,
      // width: null,
      //alignItems: "center",
    },
    scrollView: {
      backgroundColor: COLORS.background_Pale,
    },
  });
}

当我按下警告时，它显示promiseRejectionTrackingOptions.js (43:17)。

Answer 1

我过去曾多次遇到过这种情况。发出此警告通常是因为您没有为某些承诺添加

catch

块。

catch

是必需的，以防您的承诺被拒绝。

防止此警告的最简单方法是将代码包装在

try{}...catch(err)

块中。

这是防止某些错误导致崩溃的最佳方法，并且还可以处理承诺拒绝。

try{ 
    // Your code
}
catch(err){
   // handle rejection
   console.error(err)
}

您可以仅将 Promise 包装在

try

中，或者可以包装整个代码作为预防措施，如下所示

useEffect(()=>{
    try{
        // your code
    }
    catch(err){
         console.error(err)
    }
})

但是，我建议保留多个

try...catch

（特定于代码/承诺的一部分），以便在出现问题时更好地理解和调试。

Answer 2

这就是我解决问题的方法：

1.

我在 useEffect 末尾调用 AccessLocation 后添加了一个 catch。确保在使用异步函数时始终使用 catch 来找出代码未运行时的问题所在。这可能就是为什么我可能收到未处理的承诺拒绝的原因。

2.

添加捕获后，我查看了阻止程序正常运行的错误。这是因为我有一个未知变量： 位置。

3.

要解决这个问题，我意识到我所要做的就是导入位置...是的，我只是忘记从 expo-location lmao 导入位置。这就是为什么像把所有接球都投进这样的良好做法很重要。我花了很多时间才发现我忘记了导入 smh。捕获瞬间清除了一切。

这是固定代码：

import { View, Text } from "react-native";
import React, { useEffect, useState } from "react";

import * as Location from "expo-location";

export default function DateFinder() {
  const [hasForegroundPermissions, setHasForegroundPermissions] =
    useState(null);
  const [userLocation, setUserLocation] = useState(null);

  useEffect(() => {
    const AccessLocation = async () => {
      function appSettings() {
        console.warn("Open settigs pressed");
        if (Platform.OS === "ios") {
          Linking.openURL("app-settings:");
        } else RNAndroidOpenSettings.appDetailsSettings();
      }

      const appSettingsALert = () => {
        Alert.alert(
          "Allow Wassupp to Use your Location",
          "Open your app settings to allow Wassupp to access your current position.",
          [
            {
              text: "Cancel",
              onPress: () => console.warn("Cancel pressed"),
            },
            { text: "Open settings", onPress: appSettings },
          ]
        );
      };

      const foregroundPermissions =
        await Location.requestForegroundPermissionsAsync();
      if (
        foregroundPermissions.canAskAgain == false ||
        foregroundPermissions.status == "denied"
      ) {
        appSettingsALert();
      }
      setHasForegroundPermissions(foregroundPermissions.status === "granted");
      if (hasForegroundPermissions == true) {
        const location = await Location.getCurrentPositionAsync({
          accuracy: Location.Accuracy.Highest,
        });
        setUserLocation(location);
      }
    };

    AccessLocation().catch(console.error);
  }, []);

  return (
    <View>
      <View>
        <Text>"Home, sweet home"</Text>
      </View>
    </View>
  );

  const styles = StyleSheet.create({
    background: {
      backgroundColor: COLORS.background_Pale,
      flex: 1,
      // justifyContent: "flex-start",
      //alignItems: "center",
    },
    image: {
      flex: 1,
      // height: null,
      // width: null,
      //alignItems: "center",
    },
    scrollView: {
      backgroundColor: COLORS.background_Pale,
    },
  });
}

Answer 3

我在安装依赖项时遇到了一些冲突。

清理安装的依赖项： 删除node_modules和package-lock.json（如果您使用的是Yarn，则删除yarn.lock），然后重新安装所有依赖项。

rm -rf node_modules package-lock.json npm 安装