Модальное событие Bootstrap onshown срабатывает дважды ⇐ Javascript

[Anonymous]

При добавлении события show.bs.modal в модальном окне начальной загрузки внутри useEffect в React оно срабатывает дважды, даже если оно добавляется только один раз. Таким образом, 'onshown' регистрируется дважды, а 'mount' регистрируется только один раз.
Вы можете воспроизвести его с помощью следующего кода, чтобы было понятно, что строгий режим отключен, и это единственный код в проекте React.
Компонент React:

Код: Выделить всё

import {useEffect, useRef} from "react";

export default function TestModal() {
const modalRef = useRef();

useEffect(() => {
console.log("mount");
const modelReference = modalRef.current;

function onShown() {
console.log("onshown")
}

if (modelReference) {
console.log("add event listener");
modelReference.addEventListener("shown.bs.modal", onShown);
}

return () => {
if (modelReference) {
modelReference.removeEventListener("shown.bs.modal", onShown);
}
};
}, []);

return (

 {
console.log("click");
}}>
Open modal





Preview






Close





)
}

index.js:

Код: Выделить всё

import React from 'react';
import ReactDOM from 'react-dom/client';
import TestModal from './TestModal';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

);

index.html:

Код: Выделить всё

[*]

Data Collection


You need to enable JavaScript to run this app.

Когда вы берете тот же пример и делаете его в простом HTML-файле, он работает должным образом, а 'onshown' регистрируется только один раз.
html-sample:

Код: Выделить всё

Title






Open modal





Preview






Close







const modal = document.getElementById('previewFileModal');
async function onShown() {
console.log("onshown")
}
modal.addEventListener("shown.bs.modal", onShown);

Скриншот:

• react-dom: 19.2.4
• react: 19.2.4
• реагирующие скрипты: 5.0.1
• node.js: 20.18.1

Подробнее здесь: https://stackoverflow.com/questions/798 ... ring-twice