NextJS中如何将记录ID通过模态框传递给删除函数？

你需要新增一个状态来存储当前要删除的人员ID，把删除按钮点击时的人员ID和模态框关联起来，具体修改如下：

const peoples = [
    { id: 1, name: 'Scott'},
    { id: 2, name: 'Luke'},
    { id: 3, name: 'Hannah'},
    { id: 4, name: 'Reg'}
]

const Peoples = () => {
    // 新增状态：存储要删除的人员ID
    const [personToDeleteId, setPersonToDeleteId] = useState(null)
    const [confirmPersonDeleteModal, setConfirmPersonDeleteModal] = useState(false)

    const handleDeletePerson = () => {
        // 现在可以拿到要删除的ID，执行删除逻辑
        if (personToDeleteId) {
            console.log(`Deleting person with ID: ${personToDeleteId}`)
            // 这里可以添加实际删除逻辑，比如调用API、更新数组等
        }
        // 删除完成后关闭模态框并重置ID
        setConfirmPersonDeleteModal(false)
        setPersonToDeleteId(null)
    }

    // 点击删除按钮时，设置要删除的ID并打开模态框
    const openDeleteModal = (id) => {
        setPersonToDeleteId(id)
        setConfirmPersonDeleteModal(true)
    }

    return (
        <>
            <ConfirmModal
                open={confirmPersonDeleteModal}
                onClose={() => {
                    setConfirmPersonDeleteModal(false)
                    setPersonToDeleteId(null) // 关闭模态框时也要重置ID
                }}
                title="Delete Person" 
                onConfirm={handleDeletePerson}
            >
                {/* 可选：显示要删除的人员名称，提升体验 */}
                {personToDeleteId && (
                    <p>Are you sure you want to delete {peoples.find(p => p.id === personToDeleteId)?.name}?</p>
                )}
            </ConfirmModal>

            {peoples.map((people) => (
                // 给map元素添加key，避免React警告
                <div key={people.id}>
                    <p>{people.name} - {people.id}</p>
                    <a onClick={() => openDeleteModal(people.id)}>Delete</a>
                </div>
            ))}
        </>
    )
}

export default Peoples

关键修改点说明： #

• 新增personToDeleteId状态，专门存储当前待删除的人员ID。
• 封装openDeleteModal函数，点击删除按钮时同时设置目标ID并打开模态框，完成ID传递。
• handleDeletePerson函数通过personToDeleteId获取目标ID，执行删除逻辑后重置状态。
• 关闭模态框时同步重置personToDeleteId，避免残留旧ID影响后续操作。
• 给列表元素添加key属性，修复React列表渲染的警告提示。
• 可选优化：在模态框内显示待删除人员的名称，让操作更清晰直观。

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