我有两个组成部分。单击组件UserItem
中的垃圾图标-模式DeleteUserModal
会显示确认按钮“删除”。但是,当我删除项目时-它删除了错误的项目...在不同项目上使用模式组件中的onMouseOver={() => console.log(_id)}
,我可以看到_id
并没有变化,但是为什么呢?
顺便说一句,如果我直接在onDelete
组件中使用UserItem
函数-效果很好。
const UserItem = ({ user, index }) => {
const userContext = useContext(UserContext);
const { setIndexUser, deleteUser } = userContext;
const { firstName, lastName, role, _id } = user;
const onDelete = () => {
setIndexUser(null);
deleteUser(_id);
};
useEffect(() => {
M.AutoInit();
// eslint-disable-next-line
}, []);
return (
<div className="card">
<div
className="right-align card-action"
onMouseOver={() => console.log(_id)}
>
{" "}
// works fine, shows id of howered item
<a href="#delete-user-modal" className="modal-trigger">
<i className="fas fa-trash-alt" />
</a>
</div>
<DeleteUserModal onDelete={onDelete} _id={_id} />
</div>
);
};
删除项目的模式:
import React from "react";
const DeleteUserModal = ({ onDelete, _id }) => {
return (
<div id="delete-user-modal" className="modal">
<div className="modal-content">
<h4>Delete this user, all his RCOMs and devices?</h4>
</div>
<div className="modal-footer" onMouseOver={() => console.log(_id)}>
{" "}
//works incorrectly, id sticks the same...
<a
href="#!"
className="modal-close waves-effect waves-green btn-flat red-text"
onClick={onDelete}
>
Delete
</a>
</div>
</div>
);
};
export default DeleteUserModal;
我已经使用Context API解决了这个问题:单击垃圾桶图标时-_id
正在保存到商店。然后将其传递给模态。在这种情况下,它可以正常工作。