reactjs 如何使用REST API超媒体(HATEOAS)在React中加载相关项

g6ll5ycj 于 2023-05-22 发布在 React

关注(0)|答案(1)|浏览(129)

我正在尝试使用Spring Data Rest Repository建立一个react网站。我有User 1-1 Role关系。

// users repository response
{
  "_embedded" : {
    "users" : [ {
      "firstName" : "Adam",
      "lastName" : "Thomas",
      "email" : "adma.thomas@example.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/users/1"
        },
        "user" : {
          "href" : "http://localhost:8080/api/users/1"
        },
        "role" : {
          "href" : "http://localhost:8080/api/users/1/role"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/users"
    }
  }
}

// roles rest api response
{
  "_embedded" : {
    "users" : [ {
      "name" : "Admin",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/roles/1"
        },
        "user" : {
          "href" : "http://localhost:8080/api/roles/1"
        }
      }
    },{
      "name" : "Developer",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/roles/2"
        },
        "user" : {
          "href" : "http://localhost:8080/api/roles/2"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/roles"
    }
  }
}

在用户页面上，我想显示所有用户及其角色。

table, table tr, table th, table td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <body>
    <tr>
      <th>1</th>
      <th>Adam Thomas</th>
      <th>Admin</th>
    </tr>
    <tr>
      <th>2</th>
      <th>Alex Shaw</th>
      <th>Developoer</th>
    </tr>
  </body>
</table>

在react应用程序中，我已经使用useEffect钩子加载了所有用户，并且可以显示用户名。

userEffect(() => {
    axios.get("http://localhost:8080/api/users")
        .then(response => setUsers(response.data._embedded.users))            
});

如何加载相关角色并填充每个角色的角色列？我是否必须迭代每个角色API端点并提取角色名称？

reactjs

来源：https://stackoverflow.com/questions/76279947/how-to-load-related-items-in-react-using-rest-api-hypermediahateoas

1条答案

按热度按时间

dkqlctbz1#

尝试如下更新useEffect：

useEffect(() => {
  axios.get("http://localhost:8080/api/users")
    .then(response => {
      const users = response.data._embedded.users;

      // Create an array of promises to fetch roles for each user
      const rolePromises = users.map(user =>
        axios.get(user._links.role.href).then(response => response.data.name)
      );

      // Execute all promises and update the state with roles
      Promise.all(rolePromises)
        .then(roles => {
          const usersWithRoles = users.map((user, index) => ({
            ...user,
            role: roles[index]
          }));

          setUsers(usersWithRoles);
        });
    });
});

然后在表中，可以迭代users以呈现数据沿着角色，如下所示：

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    {users.map((user, index) => (
      <tr key={index}>
        <td>{index + 1}</td>
        <td>{user.firstName} {user.lastName}</td>
        <td>{user.role}</td>
      </tr>
    ))}
  </tbody>
</table>

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 如何使用REST API超媒体(HATEOAS)在React中加载相关项

1条答案

相关问题

热门标签

最新问答