JavaScript对象分配不正确

Question

我不明白为什么会发生这种情况

我正在使用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。请更正我的代码，以便我可以将值存储在对象中。

谢谢。

Answer 1

值已更新，但组件未在此处使用状态(useState钩子(重新渲染，然后从状态渲染。并使用useEffect挂钩来更新状态；user_info"；已更新。

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