axios的删除功能只从表中删除最后一个用户，而不是我单击的那个用户
因此，正如标题所说，axios.delete功能只从表中删除最后一个用户，而不是我单击的那个用户。让我向你描述一下我所面临的问题。
因此，在我制作的一个名为TableComponent.js的组件中，我从API中获取用户并将其插入到材料UI表中。现在，我为表中的每个用户添加了一个删除按钮，当单击该按钮时，将打开一个材料UI模式，该模式将显示“您确定要删除此用户吗？”以及一个删除按钮，当单击该按钮时，将从表中删除用户。
现在在我称为DeleteUser.js的另一个组件中，我放入了那个模式，还有一个从表中删除用户的函数，我现在的问题是这个函数只删除最后一个用户，而不是我点击的那个，准确地说，是表中5个用户中的第5个。
下面是TableComponent.js：
{data.data.slice(0, rowsPerPage).map((apiData, index) => {
return (
<TableRow key={index}>
<TableCell align="left" style={{ paddingLeft: 40 }}>
<EditLink
to={{
pathname: "/edit",
user: {
title: "Edit User",
id: apiData.id,
name: apiData.name,
email: apiData.email,
status: apiData.status,
gender: apiData.gender,
method: "put",
},
}}
>
{apiData.name}
</EditLink>
</TableCell>
<TableCell align="left">{apiData.email}</TableCell>
<TableCell align="left">{apiData.status}</TableCell>
<TableCell align="left">{apiData.gender}</TableCell>
<TableCell align="left">{roles}</TableCell>
<TableCell align="right" style={{ paddingRight: 40 }}>
<RoleButton onClick={handleRoleChange}>
{roles === "Admin" ? "Set as User" : "Set as Admin"}
</RoleButton>
<button onClick={setOpen}> // section for deleting users
<AiFillDelete />
<DeleteUser open={open} userID={apiData.id} />
</button>
</TableCell>
</TableRow>
);
})}下面是DeleteUser.js：
const Container = styled.div``;
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
p: 4,
};
const handleDeleteUser = (id) => {
axios
.delete(`https://gorest.co.in/public/v1/users/${id}`, {
headers: {
Authorization:
"Bearer my token goes here",
},
})
.then((response) => console.log(response));
};
const DeleteUser = ({ open, onClose, userID }) => {
return (
<Container>
<Modal open={open} onClose={onClose}>
<Box sx={style}>
<h1>tets</h1>
<button onClick={() => handleDeleteUser(userID)}>Delete</button>
</Box>
</Modal>
</Container>
);
};
export default DeleteUser;有人知道这里的问题是什么吗？
当我试图提醒第一个用户的id时，就会发生这种情况：
但是下面是它的id：
如果我按下第一个，我会得到最后一个的id：
回答 1
Stack Overflow用户
发布于 2021-10-12 11:11:51
<button onClick={setOpen}> // section for deleting users
<AiFillDelete />
<DeleteUser open={open} userID={apiData.id} />
</button>如果你看这里，你的onClick={setOpen}会切换你的状态值，表明模式是打开的，在你后面将打开的道具传递给DeleteUser模式，但reacts不知道哪个是打开的，它会打开所有的，或者打开他拥有的第一个/最后一个。
您需要指定您希望显示的状态模式，以修复您有两种可能性:创建一个DeleteUser属性
const [currentModalOpen,setCurrentModalOpen] = useState(null)在onClick处理程序上，将id作为引用onClick{() =>setCurrentModalOpen(apiData.id)}进行传递
然后为您的组件DeleteUser打开
<DeleteUser open={currentModalOpen === apiData.id} userID={apiData.id} onClose={() => setCurrentModalOpen(null)}/>如果单击的当前行与当前id不同，则open将始终为false。
告诉我，如果它工作，如果你需要更多的解释！
https://stackoverflow.com/questions/69539104
复制相似问题
腾讯云开发者
