在list.map(user)中只打开一个弹出窗口

Question

export default function CreateForm() {
const dispatch = useDispatch();
const [isOpen, setIsOpen] = useState(false);

return (
<div className="display">
{UsersList.map((user) => {
return (
<div>
<h1>{user.id}</h1>
<h1> {user.Name}</h1>
<h1> {user.userName}</h1>
<button onClick={() => {
dispatch(deleteUser({ id: beauty.id }));}}>
Delete User
</button>
<button onClick={()=>{
setIsOpen(true);
}}>View in popup</button>
<Modal open={isOpen} onClose={()=>setIsOpen(false)}>
<h2> {User.Information}</h2>
</Modal>
</div>
);})}
</div>
);
}

我是反应和还原的新手。我尝试在网页上显示用户列表，并为每个用户添加一个弹出框。但是当我点击"在弹出框中查看"按钮时在一个用户下面，所有用户的弹出框打开，但我只想打开该用户的弹出框。我意识到这是因为我在映射中使用了函数setIsOpen，而setIsOpen没有与特定的userID关联。但是我不知道如何修复这个bug。

Answer 1

您有一个对象列表，但在状态下，您只跟踪一个布尔值，以确定是否"模态"。开放:

const [isOpen, setIsOpen] = useState(false);

所以要么所有都是开的要么所有都是闭的。相反，跟踪指示哪个模式打开的标识符。例如:

const [openModal, setOpenModal] = useState();

要更新它，将相关的id值设置为该状态:

<button onClick={()=>{
setOpenModal(user.id);
}}>View in popup</button>

要使用它，检查当前记录是否与该值匹配:

open={openModal === user.id}

然后要关闭它，只需清除值:

onClose={() => setIsOpen(undefined)}