第一个问题的背景 https://stackoverflow.com/questions/72929201/react-axios-showing-message-to-user/72929320
我正在展示使用localhost:3000/users/:id
API 有 10 个用户,因此如果请求localhost:3000/users/11
应该显示错误消息
也想显示连接问题的消息
我尝试添加setError("");
inside finally
阻止但错误消息停止工作。
如果我在收到错误时不添加这次工作,但当我修复错误时,错误仍然出现。
我想再次显示用户详细信息
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;
当响应正常时,您必须清除错误
.then((res) => {
setUser(res.data);
setError("")
})
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;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)