ReactJs - 无法从 fetch catch 内的 ERR_CONNECTION_REFUSED 错误中设置状态

Question

如果发生任何错误，我试图在捕获中动态设置错误（在这种情况下，我只是想捕获 ERR_CONNECTION_REFUSED，因为我故意没有设置 localhost:8080）

const [error, setError] = React.useState("");

async function login(email, password) {
    await fetch("http://localhost:8080/auth/login", {
      method: "POST",
      body: {
        email: email,
        password: password,
      },
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        response.json();
      })
      .then((data) => {
      })
      .catch((error) => {
        console.log("Error from server");  <-- I can see this
        setError("Error from server");
      });
  }

错误未设置，因为我在重新渲染的 Typography 元素中看不到它。我知道在像 fetch 这样的异步函数中设置状态可能会出现问题，但我在网上找不到告诉我如何做到这一点的解决方案。你能帮忙吗？我还尝试使用 useEffect，只放入 setError(error) 和依赖项 [error]，因为我认为 fetch Promise 可能会在执行后的任何时刻设置错误（但不是立即），从而随时更改错误，并且 useEffect 会触发了，但仍然不起作用。 还尝试使用单独的 fetch 成员，而不使用箭头函数：

try{
   const response = await fetch(...)...
} catch(error){
   setError("Error from server");
}

仍然无法工作。 我是不是错过了什么？

Answer 1

我相信 setError() 正在工作，我通过将错误放入alert() 方法中来检查它，并弹出错误消息“来自服务器的错误”。 下面是代码：

    import React, { useState } from "react";

export const Test = () => {   const [error, setError] = useState("");

  async function login(email, password) {
    await fetch("http://localhost:8080/auth/login", {
      method: "POST",
      body: {
        email: email,
        password: password,
      },
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        response.json();
      })
      .then((data) => {})
      .catch((error) => {
          console.log("Error from server");
          setError("Error from server");
        });
    }
    
    login("[email protected]", "iamthepassword");
    
    alert(`This is the error message: ${error}`)

  return <div>{error}</div>; };