javascript - 为什么显示后无法清除错误消息-axios-react

Question

First question for context

我正在展示使用 localhost:3000/users/:id API 有 10 个用户，因此如果请求 localhost:3000/users/11 应显示错误消息

也想显示有关连接问题的消息 我尝试在 finally block 中添加 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))
      .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;

Answer 1

当响应正常时，您必须清除错误

.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;