React项目中如何将联系人ID传递至删除确认Modal？

问题根源 #

1. ID传递错误：你在ConfirmModal里用useParams()获取ID，但这个组件是在列表循环中渲染的，并非路由页面，所以拿不到当前联系人的正确ID，应该通过组件props从父组件Contacts传递。
2. 无意义的随机失败：原代码里用Math.random() > 0.5随机决定Promise的resolve/reject，这是测试逻辑，会导致无意义进入catch块，需要改成根据实际删除操作结果处理。

修改代码 #

1. 调整ConfirmModal组件，接收父组件传递的联系人数据

import React from "react";
import { Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import DeleteIcon from "../assets/icons/DeleteIcon";
import { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";

// 从props接收当前要删除的联系人对象
const ConfirmModal = ({ contact }) => {
  const { REMOVE_CONTACT } = useContext(GlobalContext);

  const confirm = () => {
    Modal.confirm({
      title: '确定要删除这个联系人吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        return new Promise((resolve, reject) => {
          try {
            // 执行删除操作，直接传入当前联系人对象
            REMOVE_CONTACT(contact);
            resolve(); // 删除成功后标记Promise完成
          } catch (error) {
            reject(error); // 仅在实际出错时进入catch
          }
        })
        .then(() => console.log('删除成功'))
        .catch((err) => console.log('删除失败:', err))
      },
      onCancel() {},
    });
  };

  return (
    <div onClick={confirm}>
      <DeleteIcon/>
    </div>
  );
};

export default ConfirmModal;

2. 修改Contacts组件，传递当前联系人给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 } = 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}`}  >
                    {/* 传递当前循环的contact对象给ConfirmModal */}
                    <ConfirmModal contact={contact} />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Contacts;

补充说明 #

如果你的REMOVE_CONTACT方法只需要接收联系人ID而非整个对象，只需修改两处：

1. 在Contacts里传递ID：<ConfirmModal contactId={contact.id} />
2. 在ConfirmModal里接收并使用：

const ConfirmModal = ({ contactId }) => {
  // ...
  REMOVE_CONTACT(contactId);
  // ...
}

内容的提问来源于stack exchange，提问作者Pasha