找出React Native中引起可能未处理的Promise拒绝的原因

在这篇文章中，我们将探讨React Native中的**可能未处理的Promise拒绝**错误。

安装： 按照以下步骤创建你的React Native项目

步骤1： 打开终端并运行下面的命令。

npx create-expo-app project-name

步骤2： 现在进入创建的文件夹，并使用以下命令启动服务器。

cd "project-name"

步骤3： 执行以下命令在项目文件夹的终端中，启动react-native程序。

npx expo start

然后按下‘a’键或‘i’键在您的安卓或iOS模拟器中打开它。

项目结构:

找出React Native中引起可能未处理的Promise拒绝的原因

错误信息： 下面是在React Native应用程序中可能发生的一个错误代码，当一个Promise被拒绝但拒绝未被处理时。错误信息如下图所示。

示例： 以下代码将显示错误和问题：

import React, { useState } from "react"; 
import { View, Button, Text } from "react-native"; 
import { StatusBar } from "expo-status-bar"; 
  
export default function App() { 
    const [data, setData] = useState(); 
  
    function onPress() { 
        fetch("https://randomuser.me/api/idk") 
            .then((response) => response.json()) 
            .then((data) => { 
                // Use the data from the server here 
                setData(JSON.stringify(data)); 
            }) 
    } 
  
    return ( 
        <View style={{ flex: 1, alignItems: "center",  
                       justifyContent: "center" }}> 
            <StatusBar style="auto" /> 
            <Button title="Load data" 
                    onPress={onPress} /> 
            <Text>{data}</Text> 
        </View> 
    ); 
}

输出：

找出React Native中引起可能未处理的Promise拒绝的原因

import React, { useState } from "react"; 
import { View, Button, Text } from "react-native"; 
import { StatusBar } from "expo-status-bar"; 
  
export default function App() { 
    const [data, setData] = useState(); 
  
    function onPress() { 
        fetch("https://randomuser.me/api/idk") 
            .then((response) => response.json()) 
            .then((data) => { 
                // Use the data from the server here 
                setData(JSON.stringify(data)); 
            }) 
            .catch((error) => { 
                // Handle any errors that occur 
                console.error(error); 
            }); 
    } 
  
    return ( 
        <View style={{ flex: 1, alignItems: "center",  
                       justifyContent: "center" }}> 
            <StatusBar style="auto" /> 
            <Button title="Load data" 
                    onPress={onPress} /> 
            <Text>{data}</Text> 
        </View> 
    ); 
}

在这个例子中，在按钮被点击时调用 onPress 函数。fetchData 函数使用 fetch 函数进行 HTTP 请求，并等待响应。如果请求成功，响应数据将使用 setData 函数存储在 data 状态中。如果请求失败，拒绝将被 catch 函数捕获，并将错误消息记录到控制台中。

添加 “.catch()” 之后的错误：

找出React Native中引起可能未处理的Promise拒绝的原因