调用函数后Dialog元素无法显示，报错‘Dialog未连接DOM’

问题原因 #

你在组件顶层直接赋值const addConfirm = addModal.current!;，但组件首次渲染时，ref还未关联到DOM的dialog元素，此时addModal.current是null。后续即使ref绑定了DOM，addConfirm也不会自动更新——它只是一个初始化时固定的变量，不是响应式的。当API调用完成后，你调用的addConfirm.showModal()其实是在操作一个未连接到DOM的无效引用，因此触发错误。

解决方案 #

不要提前缓存ref.current的值，而是在需要调用方法时直接使用addModal.current，并通过可选链确保元素存在：

修改后的代码示例：

const addModal = useRef<HTMLDialogElement>(null);

async function handleAddProduct(item: typeof newItem) {
    setShopLoading(true);

    try {
      const response = await privateReq.post("/items", item);
      // 直接使用最新的ref.current，并用可选链避免空值调用
      addModal.current?.showModal(); 
      // 其他代码...
    } catch (error) {
        console.error(error); // 修正原代码的语法错误（冒号改分号）
    } finally {
      setShopLoading(false);
    }
  }

<section>
  <form onSubmit={(e) => (e.preventDefault(), handleAddProduct(newItem))}>
    // input内容...
  </form>

  <dialog ref={addModal}>
    <h1>Item added successfully</h1>
    <button
      onClick={(e) => {
        e.preventDefault();
        // 同样直接使用ref.current操作关闭
        addModal.current?.close();
        setNewItem(initInput);
      }}
    >
      Add more
    </button>
    // 其他dialog内容...
  </dialog>
</section>

补充说明 #

• 使用可选链操作符?.可以确保只有当dialog元素确实存在于DOM中时，才会执行showModal()或close()方法，避免空值报错。
• 永远不要在组件顶层缓存ref.current的值，因为ref.current会在DOM挂载完成后才更新，顶层变量只会保留初始化时的null，无法同步后续的DOM变化。

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