问题描述
我不明白为什么会发生
我正在使用React创建一个Web应用
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;