Javascript 管理映射函数中的分组按钮加载状态

我有两个按钮接受和拒绝按钮，它们是由映射函数生成的卡的一部分。 我需要启用每个卡的状态并设置为独立加载。 这是我当前激活状态为忙碌的方式：

    const [isBusy, setBusy] = useState({});

........

setBusy(prev => ({ ...prev, [id]: true }));
        setTimeout(
            () => setBusy(prev => ({ ...prev, [id]: false })),
            3000
        );

这些是按钮

return [
            <Button loading={isBusy[id] || false} title="Invite" onPress={() => invite(id)}  />,
            <Button loading={isBusy[id] || false} title="Remove" onPress={() => reject(id)}  />,
        ];

返回[
邀请（id）}/>，
拒绝（id）}/>，
];

目前的挑战是，单击Invite按钮也会激活与

id

匹配的特定卡中的remove按钮的状态。

---

这都包含在地图功能下显示的一张卡片中，每张卡片都有两个按钮要显示，分别是invite和reject按钮，我需要分别处理每张卡片中这些单独按钮的状态，因此如果我单击invite，

isBusy

仅对“邀请”按钮激活，而“拒绝”按钮也单独处理

如果我正确理解了问题，您需要为每个卡设置两个单独的状态，为每个按钮设置一个。您可以将键更改为

${id}-invite

和

${id}-remove

或将它们合并到具有id键的对象中

const [isInviting, setInviting] = useState(true);
const [isRemoving, setRemoving] = useState(true);

---

然后创建两个单独的setter函数来完成您想要的任务，并在相应的按钮中使用每个函数。

@Rabbani是的，您已经理解了我的查询。你能举两种情况的一个例子吗？我试着添加主要的想法。试着实现和测试它。哦，我明白了，这很有效。非常感谢。快速提问，这是要使用的最佳方法，还是有替代方法？对于最佳方法，最好查看整个组件和逻辑。如果答案有帮助的话，别忘了接受正确的答案。