如何将用户id传递给modal

Question

我编译了一个带有上下文的项目。Crud操作在这里工作没有问题。然而，有一个问题是，当您单击删除按钮时，确认模式将打开，如果我单击确定，则必须删除所选联系人的id。但我不知道如何将它的联系人id传递给modal进行删除。现在，当我点击ok函数时，它会落入catch块中。

import React from "react";
import { Modal, Space } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import DeleteIcon from "../assets/icons/DeleteIcon";
import { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import { useParams } from "react-router-dom";
const ConfirmModal = () => {
const {id} = useParams()

const {  REMOVE_CONTACT, contacts } = useContext(GlobalContext);

const confirm = () => {
Modal.confirm({
title: 'Do you want to delete this contact?',
icon: <ExclamationCircleOutlined />,
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
})
.then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
.catch(()=>console.log('error'))
},
onCancel() {},
});
};
return (
<>
<div onClick={confirm}>
<DeleteIcon/>
</div>
</>
);
};
export default ConfirmModal;

import React, { useContext } from "react";
import { GlobalContext } from "../../context/GlobalState";
import DeleteIcon from "../../assets/icons/DeleteIcon";
import EditIcon from "../../assets/icons/EditIcon";
import styles from "../Contacts/contacts.module.scss";
import { NavLink } from "react-router-dom";
import InfoModal from "../../utils/InfoModal";
import ConfirmModal from "../../utils/ConfirmModal";
const Contacts = () => {

const { contacts, REMOVE_CONTACT } = useContext(GlobalContext);
return (
<div className={styles.contacts} >
<div className="container">
<div className="row  d-flex justify-content-center">
{contacts.map((contact) => (
<div className="col-lg-7 p-3" key={contact.id}>
<div className={styles.contact}>
<div>
<h1 className={styles.title}>
{contact.name} {contact.surname} {contact.fatherName}
</h1>
<p className={styles.desc}>{contact.specialty}</p>

</div>
<div className={styles.btns}>
<div className={`${styles.contactBtn} ${styles.infoBtn}`}>
<InfoModal/>
</div>
<NavLink className={`${styles.contactBtn} ${styles.editBtn}`} to={`/contact/edit/${contact.id}`}>
<EditIcon contact={contact} />
</NavLink>
<div className={`${styles.contactBtn} ${styles.deleteBtn}`}  >
<ConfirmModal />
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default Contacts;

在此处输入图像描述

Answer 1

您应该在ConfirmModal组件中接受一个id道具，如下所示：

const ConfirmModal = ({id}) => {

const {  REMOVE_CONTACT, contacts } = useContext(GlobalContext);
const confirm = () => {
Modal.confirm({
title: 'Do you want to delete this contact?',
icon: <ExclamationCircleOutlined />,
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
})
.then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
.catch(()=>console.log('error'))
},
onCancel() {},
});
};
return (
<>
<div onClick={confirm}>
<DeleteIcon/>
</div>
</>
);
};

此外，传递使用ConfirmModal的id，如下所示：

<ConfirmModal id={contact.id}/>

此外，将onOk处理程序更改为更具确定性的处理程序，使用Math.random会导致很多错误：

onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
})
.then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
.catch(()=>console.log('error'))
}

Answer 2

如果您从catch块中console.log错误，它会告诉您出了什么问题。

return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
})
.then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
.catch((err) => console.log(err))