React CRUD中Modal/Dialog打开时选中ID错误的问题排查

问题现象 #

开发简易CRUD应用时，创建、读取、删除功能正常，但更新功能存在异常：点击列表中任意项的编辑按钮打开dialog时，实际传入的ID始终是列表第一项的ID。例如列表包含ID为1、2、3的项，点击编辑ID=3的项，modal打开后传入的ID却是1，导致始终更新第一项。

问题根源 #

1. Dialog元素ID重复：循环渲染EditModal时，所有dialog都使用固定的id="form"，调用document.getElementById("form")只会返回DOM中第一个匹配该ID的元素，因此无论点击哪个编辑按钮，打开的都是第一个项对应的dialog，绑定的ID自然是第一个项的ID。
2. State初始化闭包问题：EditModal中直接用itemId初始化state，组件批量渲染时，闭包可能导致state捕获的是初始循环值（第一个item的ID）。

修复方案 #

步骤1：为每个Dialog生成唯一ID #

在DisplayCollects组件中，给每个EditModal传入基于itemId的唯一ID：

<EditModal id={`form-${item.id}`} editCollect={editCollect} itemId={item.id}/>

步骤2：修改EditModal组件，使用唯一ID并优化state初始化 #

import { useState } from "react";

function EditModal({editCollect, itemId, id}) {
    // 函数式初始化state，确保获取最新的itemId
    const [input, setInput] = useState(() => ({
        input: itemId,
        company: "",
        date: "",
        product: "",
    }));

    function handleInput(event) {
        const {name, value} = event.target;
        // 简化状态更新逻辑
        setInput(prev => ({
            ...prev,
            [name]: value
        }));
    }

    function openDialog() {
        const dialog = document.getElementById(id);
        dialog.showModal();
    }

    return (
        <>
            <dialog id={id}>
                <table>
                    <thead>
                        <tr>
                            <th>Empresa</th>
                            <th>Data</th>
                            <th>Material</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input onChange={handleInput} value={input.company} type="text" name="company" placeholder="Empresa"/></td>
                            <td><input onChange={handleInput} value={input.date} type="text" name="date" placeholder="Data"/></td>
                            <td><input onChange={handleInput} value={input.product} type="text" name="product" placeholder="Material"/></td>
                            <td><img onClick={() => editCollect(input)} src="/assets/images/done.png" alt="done button"/></td>
                        </tr>
                    </tbody>
                </table>
            </dialog>
            <img onClick={openDialog} src="/assets/images/edit.png" alt="edit button"/>
        </>
    )
}

export default EditModal;

步骤3（可选）：简化DisplayCollects中的handleInput函数 #

function handleInput(event) {
    const {name, value} = event.target;
    setInput(prev => ({...prev, [name]: value}));
}

验证效果 #

修改后，每个编辑按钮会打开对应项的dialog，传入的ID为当前点击项的ID，更新功能可正常作用于目标项。

内容的提问来源于stack exchange，提问作者Gustavo F. Marcial