无法在 React 的 useEffect 中更改变量

Question

我正在尝试更改 js React 中 useEffect 调用中的变量值。我注意到值在函数内部发生了变化，但全局值没有改变。

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)
...
...
}

useEffect 内部的控制台日志显示每个变量的更新值。但是，useEffect 之外的控制台日志显示每个变量的值为空。

如何更改这些全局值？

Answer 1

对于这种情况，您应该使用 useRef。

举个简单的例子。

function MyComponent(){
   const A_name = useRef('');
   
   useEffect(() => {
      A_name.current = 'new value'
   }, []);
}

您可以 change/access 变量 .current 属性

您可以在此处的文档中阅读更多内容：https://reactjs.org/docs/hooks-reference.html#useref

它提到：useRef returns 一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。

所以它适合您的 objective

Answer 2

全局变量和函数在 React 第一次加载所有脚本时启动，这意味着当您第一次加载（或重新加载）页面时。 React 本身并不知道这些全局变量的变化。

你的代码流程是这样的

全局变量已初始化。
console.log() 加载组件时打印内容。
异步调用会改变全局变量 => React 不知道它们。因此不会重新呈现您的组件。因此，console.log() 不会被调用。

您应该使用状态挂钩来存储这些变量，以便 React 知道它们已更改。

无法在 React 的 useEffect 中更改变量

Cannot change variable in useEffect in React

javascript

reactjs

use-effect