Модальное событие 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.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);





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