【问题标题】:Unable to set array in useState hook无法在 useState 挂钩中设置数组
【发布时间】:2020-07-27 06:22:46
【问题描述】:

这是我正在尝试在 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;
    });
};

【问题讨论】:

  • 那么,数据有什么?控制台日志(数据)。也请提供更多细节
  • 您确定没有错误吗? 会发生什么
  • 我的代码完美吗?
  • 您遇到的错误是什么?
  • @Vasanth 我正在从数据库和控制台中获取所有用户,他们作为用户的对象来

标签: javascript arrays reactjs


【解决方案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();
    });
};

此更改应该有助于默默吞下失败的获取请求并使用错误值更新状态。

另外,对于 GET 请求的正文,您是否需要将 users 传递给 loadalluser

【讨论】:

    猜你喜欢
    • 2021-09-04
    • 2020-04-19
    • 1970-01-01
    • 2020-06-07
    • 1970-01-01
    • 2021-06-06
    • 2021-03-10
    • 2021-02-19
    • 2021-06-16
    相关资源
    最近更新 更多