Tengo un componente de reacción simple, el fuego se imprime una vez, pero injectWindowInterval se llama dos veces al evento aunque estoy configurando el valor de la bandera, ¿por qué es así?
const Header = () => { let flag = true; console.log("fire"); function injectWindowInterval() { if (flag && window.google) { flag = false; console.log(window.google); } } const script = document.createElement("script"); script.src = "https://accounts.google.com/gsi/client"; script.onload = injectWindowInterval; script.async = true; document.querySelector("body")?.appendChild(script); return ( <div className="header"> <h3 className="header__title">RE</h3> </div> ); };Actualización: por alguna razón, el script se agrega dos veces en el cuerpo.
En algunos casos, se llama a la función en render cuando se definen. Un ejemplo común es con métodos onClick para botones
<button onClick={onClickFunction}>Click me</button> //fires on render <button onClick={()=>onClickFunction()}>Click me</button> //no fire on render, works wellAsí que tal vez intente
const Header = () => { let flag = true; console.log("fire"); const script = document.createElement("script"); script.src = "https://accounts.google.com/gsi/client"; script.onload = () => { if (flag && window.google) { flag = false; console.log(window.google); } }; script.async = true; document.querySelector("body")?.appendChild(script); return ( <div className="header"> <h3 className="header__title">RE</h3> </div> ); };Si está renderizando el componente en <React.StrictMode>, el componente se renderizará dos veces con seguridad en el modo de desarrollo. Intenté representar el componente anterior (Encabezado) y el incendio se registra en la consola dos veces, así que agregue la etiqueta del script dos veces. Aquí está la salida de la consola
Nota: también tenga en cuenta que React renderiza el componente dos veces solo en el modo de desarrollo. Una vez que construyas la aplicación, el componente se renderizará solo una vez.
