javascript - 映射时获取重复按钮

Question

我正在尝试遍历来自团队的一系列邀请，并且用户可以拥有许多邀请。所以现在我想当我点击邀请按钮时，邀请将被添加到用户对象中。

这是我的项目的样子：

这是我在另一个团队的时候：

所以我想实现一种方式，当用户有邀请时，邀请按钮将消失，如果我们从另一个团队搜索，其 teamId 与 Invitations.teamId 不同，按钮就会出现。我怎样才能做到这一点？

我在我的代码沙箱中添加了示例以便于处理：https ://codesandbox.io/s/brave-hugle-4m835?file=/src/App.js

标签： javascriptreactjs

Answer 1

您可以添加一个函数来验证用户是否已收到邀请。

import "./styles.css";
import InviteCard from "./InviteCard";

export default function App() {
  const thisTeamId = 3;

  const users = [
    {
      InvitesApplications: [{ teamId: 1 }, { response: "Waiting on response" }],
      Memberships: [{ teamId: 2 }, { response: "Waiting on response" }],
      fullname: "Nathan"
    },
    {
      InvitesApplications: [{ teamId: 2 }, { response: "Waiting on response" }],
      Memberships: [{ teamId: 1 }],
      fullname: "Nick"
    },
    {
      InvitesApplications: [
        { teamId: 2, response: "Waiting on response" },
        { teamId: 1, response: "Waiting on response" },
        { teamId: 3, response: "Waiting on response" }
      ],
      Memberships: [],
      fullname: "Nancy"
    }
  ];

  const isInvitationAvailable = (teamId, invitations) => {
        const index= invitations.findIndex(invitation => invitation.teamId === teamId)
        return index > -1
  }

  return (
    <div className="App">
      {users
        .filter(
          (user) =>
            user.Memberships.length < 1 ||
            user.Memberships.every((member) => member.teamId !== thisTeamId)
        )
        .map((user, index) => (
          <div key={index}>
            <InviteCard user={user} thisTeamId={thisTeamId} />
            {!isInvitationAvailable(thisTeamId, user.InvitesApplications)  && <button>Invite</button>}
          </div>
        ))}
    </div>
  );
}