Question

这是我的代码，我正在尝试在setUsers中设置数组，数据正确地来自后端，但未成功设置钩子，请帮助我

const LoadAllUser = () => {
  const [users, setUsers] = useState([]);
  const loadUsers = () => {
    loadalluser()
      .then((data) => {
        if (data.error) {
          console.log(data.error);
          // setusers(data.error);
        } else {
          setUsers(data);
        }
      })
      .catch((eror) => console.log("error is here"));
  };
  useEffect(() => {
    loadUsers();
  }, []);

我的回报看起来像这样

return (
    <div>
      {users.length > 0 ? (
        users.map((index, user) => {
          return (
            <div key="index">
              <label>Name : {user.name}</label>
              <label>Email : {user.email}</label>
              <label>NUmber : {user.number}</label>
            </div>
          );
        })
      ) : (
        <h1> No users found </h1>
      )}
      )
    </div>
  );

这就是我获取所有用户的方式

export const loadalluser = (users) => {
  return fetch(`${API}/loadalluser`, {
    method: "GET",
    body: JSON.stringify(users),
  })
    .then((response) => {
      return response.json();
    })
    .catch((error) => {
      return error;
    });
};

Answer 1

fetch仅拒绝已取消的请求或网络错误，否则将返回已解决的Promise。

Checking that the fetch was successful

如果发生网络错误，则fetch()承诺将以TypeError拒绝在服务器端遇到或CORS配置错误，尽管这通常表示权限问题或类似问题-404并不构成例如网络错误。准确检查成功 fetch()将包括检查诺言是否已解决，然后检查Response.ok属性的值为true。

您应检查response.ok以确保请求成功或失败。您还可以删除catch块，因为使用组件代码中的任何catch块都会捕获它们。

export const loadalluser = (users) => {
  return fetch(`${API}/loadalluser`, {
    method: "GET",
    body: JSON.stringify(users),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    });
};

此更改应通过 not 静默吞下失败的提取请求并使用错误的值更新状态来提供帮助。

此外，您是否需要将users传递给loadalluser作为GET请求的正文？

无法在useState挂钩中设置数组

1 个答案: