Estoy mostrando el uso con localhost:3000/users/:id API tiene 10 usuarios, por lo que si la solicitud a localhost:3000/users/11 debería mostrar un mensaje de error
También quiero mostrar un mensaje para problemas de conexión. He intentado agregar setError(""); dentro finally bloque pero el mensaje de error dejó de funcionar.
Si no agrego este tiempo de trabajo cuando recibo un error, pero cuando soluciono el error, el error sigue apareciendo.
Quiero volver a mostrar los datos del usuario
import { useParams } from "react-router-dom"; import { useState, useEffect } from "react"; import axios from "axios"; function User() { const { id } = useParams(); const [user, setUser] = useState(null); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(true); useEffect(() => { axios("https://jsonplaceholder.typicode.com/users/" + id) .then((res) => setUser(res.data)) .catch((error) => setError(error.message)) .finally(() => setIsLoading(false)); }, [id]); return ( <div> {error === "Request failed with status code 404" ? ( <p>{error}</p> ) : isLoading ? ( <h2>Loading...</h2> ) : ( <div> <h3>User Info</h3> <p>Name: {user.name}</p> <p>Email: {user.email}</p> <p>Phone: {user.phone}</p> </div> )} </div> ); } export default User;Tienes que borrar tu error cuando la respuesta es OK
.then((res) => { setUser(res.data); setError("") })Aquí hay una caja de arena
---- import { useParams } from "react-router-dom"; import { useState, useEffect } from "react"; import axios from "axios"; function User() { const { id } = useParams(); const [user, setUser] = useState(null); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(true); useEffect(() => { axios("https://jsonplaceholder.typicode.com/users/" + id) .then((res) => { setUser(res.data); setError("") }) .catch((error) => setError(error.message)) .finally(() => setIsLoading(false)); }, [id]); return ( <div> {error === "Request failed with status code 404" ? ( <p>{error}</p> ) : isLoading ? ( <h2>Loading...</h2> ) : ( <div> <h3>User Info</h3> <p>Name: {user.name}</p> <p>Email: {user.email}</p> <p>Phone: {user.phone}</p> </div> )} </div> ); } export default User;