При добавлении события 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
