无法在 React 中更改 useEffect 中的变量 [重复]

Posted 2023-03-17

【中文标题】无法在 React 中更改 useEffect 中的变量 [重复]

【英文标题】：Cannot change variable in useEffect in React [duplicate]

【发布时间】：2022-01-10 19:22:13

【问题描述】：

我试图在 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 之外的控制台日志显示每个变量的值都是空白的。

如何更改这些全局值？

【问题讨论】：

a) 不要使用全局变量 b) 全局变量做改变。您的 console.log 只是发生在 他们改变之前 - useEffect 和 .then() 都是异步的

为什么不直接使用setO_Name(data.overwatch); 而不是O_name = data.overwatch;？

你不能，在useEffect中定义全局变量，

【参考方案1】：

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

你的代码流程是这样的。

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

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

【参考方案2】：

在这种情况下，您应该使用useRef。

举个简单的例子。

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

您可以使用.current 属性更改/访问变量

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

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

所以它符合你的目标