diff --git a/frontend/src/components/TelegramLoginButton.tsx b/frontend/src/components/TelegramLoginButton.tsx index a18f9c3..1fb401f 100644 --- a/frontend/src/components/TelegramLoginButton.tsx +++ b/frontend/src/components/TelegramLoginButton.tsx @@ -28,9 +28,18 @@ export function TelegramLoginButton({ onAuth: (user: TelegramUser) => void; }) { const ref = useRef(null); + // onAuth держим в ref, чтобы он НЕ был в зависимостях эффекта: иначе новая инлайн- + // функция на каждый рендер пересоздавала бы виджет (а cleanup сносит его innerHTML + // в момент отрисовки — в dev со StrictMode кнопка из-за этого не появлялась). + const onAuthRef = useRef(onAuth); + onAuthRef.current = onAuth; useEffect(() => { - window.__fsTelegramAuth = (user) => onAuth(user); + window.__fsTelegramAuth = (user) => onAuthRef.current(user); + const node = ref.current; + if (!node) return; + node.innerHTML = ""; // на случай повторного монтирования (StrictMode) + const script = document.createElement("script"); script.src = "https://telegram.org/js/telegram-widget.js?22"; script.async = true; @@ -39,14 +48,12 @@ export function TelegramLoginButton({ script.setAttribute("data-userpic", "false"); script.setAttribute("data-request-access", "write"); script.setAttribute("data-onauth", "__fsTelegramAuth(user)"); + node.appendChild(script); - const node = ref.current; - node?.appendChild(script); return () => { - if (node) node.innerHTML = ""; - delete window.__fsTelegramAuth; + node.innerHTML = ""; }; - }, [botUsername, onAuth]); + }, [botUsername]); // только смена бота пересоздаёт виджет return
; }