JavaScript对象分配不正确

如何解决JavaScript对象分配不正确

我不明白为什么会发生

我正在使用React创建一个Web应用

我有一个名为user_info的Javascript对象

var user_info = {
    username: '',password: '',f_name: ''
};

现在，我想将这些值分配给我从Firebase实时数据库中获取的值。

 db.ref("/users").on("value",snapshot => {                           
            
            alert("Firebase " + snapshot.child("username").val()) // Got the value correctly.....

            user_info.username = snapshot.child("username").val();
            user_info.password = snapshot.child("password").val(); //Assigning it to the object...
            user_info.f_name = snapshot.child("f-name").val();
            
            alert("Firebase Username = " + user_info.username); //Assigned Successfully...
           
        });

在这段代码之后（在snapshot function之外），我使用alert()再次显示用户名。

alert(user_info.username); // No value is displayed here.

我猜想快照中的值未分配给对象user_info。稍后，我将导出该对象并将其导入另一个我遇到相同问题的文件中。

export {user_info};

---在其他文件中---------

import React from 'react';
import {user_info} from './users.js';

function LandingPage()
{
  return(
      <div className="container">
         <h1>Welcome {user_info.username}</h1> // Only 'Welcome' is displayed
      </div>
   );
}

export default LandingPage;

我不明白为什么未将值分配给对象user_info。请更正我的代码，以便将值存储在对象中。

谢谢。

解决方法

值已更新，但组件未重新呈现使用状态（useState挂钩），然后从状态呈现它。 并在更新“ user_info”时使用useEffect挂钩更新状态。

import React,{useState,useEffect} from 'react';
import {user_info} from './users.js';

function LandingPage()
{
const [userInfo,setUserInfo]=useState({});

useEffect(()=>{
setUserInfo(user_info);
},[user_info]);


  return(
      <div className="container">
         <h1>Welcome {userInfo?.username}</h1> // Only 'Welcome' is displayed
      </div>
   );
}

export default LandingPage;

https://reactjs.org/docs/state-and-lifecycle.html