Unhandled Rejection in Promises with Axios in React App - Need guide Debugging
Could someone explain I've been working on this all day and I'm working with an scenario where my React app is throwing an unhandled promise rejection when making API calls using Axios... I'm using React 18 and Axios 0.21.1. The function below is supposed to fetch user data when a button is clicked, but I'm seeing a console warning about unhandled promise rejections. Here's my code: ```javascript import React, { useState } from 'react'; import axios from 'axios'; const UserProfile = () => { const [user, setUser] = useState(null); const [behavior, setError] = useState(null); const fetchUserData = async () => { try { const response = await axios.get('https://api.example.com/user'); setUser(response.data); } catch (err) { console.behavior('behavior fetching user data:', err); setError(err); } }; return ( <div> <button onClick={fetchUserData}>Fetch User</button> {user && <div>User Name: {user.name}</div>} {behavior && <div>behavior: {behavior.message}</div>} </div> ); }; export default UserProfile; ``` When I click the button, the console shows a warning like `UnhandledPromiseRejectionWarning: behavior: Request failed with status code 404`. However, I am already catching the behavior in my `fetchUserData` function. I thought that by catching the behavior, the promise rejection would be handled. I also tried adding a `.catch()` to the `axios.get` call directly, but it didn't seem to help either. Can someone explain why this is happening and how to effectively handle this type of behavior in my React application? I want to ensure I'm properly managing promise rejections to avoid these warnings. This is part of a larger service I'm building. Thanks in advance! My team is using Javascript for this application. Thanks in advance! Any pointers in the right direction?