React.StrictMode representa la página dos veces para fines de depuración. Tengo un aviso () en una página, que se ejecuta dos veces debido a esto, y he estado tratando de solucionarlo, ya que me gustaría mantener StrictMode.
Intenté esto, pero no funcionó:
useEffect(() => { let identified = false; if (!identified) { let pName = prompt("Insert name"); setPlayerName(pName); } return () => { identified = true; } }, [])También probé esto:
const [playerName, setPlayerName] = useState(''); useEffect(() => { if (!playerName) { let pName = prompt("Insira name"); setPlayerName(pName); } }, [])Y esto...:
const [playerName, setPlayerName] = useState(''); useEffect(() => { if (!playerName) { let pName = prompt("Insira name"); return () => { setPlayerName(pName);; } } }, [])pero no puedo hacerlo bien. ¿Cuál es la forma correcta de hacerlo?
Aquí puedes encontrar información sobre cómo hacerlo:
Los efectos que solo deberían ejecutarse una vez pueden usar una ref.
const didLogRef = useRef(false); useEffect(() => { // In this case, whether we are mounting or remounting, // we use a ref so that we only log an impression once. if (didLogRef.current === false) { didLogRef.current = true; SomeTrackingAPI.logImpression(); } }, []);En tu escenario:
const didPromptRef= useRef(false); useEffect(() => { if (didPromptRef.current === false) { didLogRef.current = true; const pName = prompt("Insert name"); setPlayerName(pName); } }, []);