Estoy tratando de cambiar los valores de las variables dentro de una llamada useEffect en js React. Observo que los valores cambian dentro de la función, pero el valor global no cambia.
var O_name = ""; var A_name = ""; var A_platform = ""; var C_name = ""; function Statsview( {backButton} ) { const urlParams = new URLSearchParams(window.location.search); const name = urlParams.get('name'); var data = useRef(); const [overwatchName, setO_Name] = useState([]); useEffect(() => { console.log('mounted') database.collection('USERS').where('name','==',name).get().then(snapshot => { snapshot.forEach(doc => { var data = doc.data() O_name = data.overwatch; console.log(O_name) A_name = data.apexLegends; console.log(A_name) A_platform = data.apexLegendsPlatform; console.log(A_platform) C_name = data.chess; console.log(C_name) }) }).catch(error => console.log(error)) },[]); console.log("oname: ",O_name) console.log("aname: ",A_name) console.log("aplat: ",A_platform) console.log("cname: ",C_name) ... ... }Los registros de la consola dentro de useEffect muestran valores actualizados para cada variable. Sin embargo, los registros de la consola fuera de useEffect muestran que los valores de cada variable están en blanco.
¿Cómo cambio estos valores globales?
Las variables y funciones globales se inician cuando React carga por primera vez todos los scripts, es decir, cuando carga (o recarga) la página por primera vez. React en sí no es consciente de la mutación de estas variables globales.
Su flujo de código es así.
console.log() imprime el contenido cuando se carga un componente.console.log() .Debe usar el enlace de estado para almacenar estas variables para que React sepa que han cambiado.
Debe usar useRef para este caso.
así que por ejemplo simple.
function MyComponent(){ const A_name = useRef(''); useEffect(() => { A_name.current = 'new value' }, []); } Puede cambiar/acceder a la variable con la propiedad .current
Puede leer más en los documentos aquí: https://reactjs.org/docs/hooks-reference.html#useref
Mencionó: useRef devuelve un objeto ref mutable cuya propiedad .current se inicializa en el argumento pasado (valor inicial). El objeto devuelto persistirá durante toda la vida útil del componente.
Así que encajaría con tu objetivo.