這是我的代碼。我正在從 firebase 獲取資料并將其放入我的groupDataMap.
const Home = () => {
const [memberInfo, setMemberInfo] = useState('');
const auth = getAuth();
const user = auth.currentUser;
const memberId = auth.currentUser.uid
const db = getDatabase();
const dbRef = ref(db, 'groups');
let groupDataMap = {};
//get group name's if member_id(user) matches member id
onValue(dbRef, (snapshot)=> {
const data = snapshot.val();
for(var key in data){
if(data.hasOwnProperty(key)){
const groupname = data[key]
groupDataMap = groupname
}
}
})
setMemberInfo(groupDataMap)
我用來在我的回報memberInfo中填充一個元素：<li>
return (
<div>
<div class="brand">
<h1>Headline</h1>
<p>paragraph</p>
</div>
<ul class="list-group container-fluid">
<li class="list-group-item">
{memberInfo}
</li>
</ul>
</div>
);
我不只是設定一次狀態嗎？
uj5u.com熱心網友回復：
我不只是設定一次狀態嗎？
不，setMemberInfo將被一次又一次地呼叫，從而使組件無限渲染。
閱讀有關useEffect掛鉤的資訊。
const [memberInfo, setMemberInfo] = useState('');
const auth = getAuth();
const user = auth.currentUser;
const memberId = auth.currentUser.uid
useEffect(() => {
const db = getDatabase();
const dbRef = ref(db, 'groups');
let groupDataMap = {};
//get group name's if member_id(user) matches member id
onValue(dbRef, (snapshot)=> {
const data = snapshot.val();
for(var key in data){
if(data.hasOwnProperty(key)){
const groupname = data[key]
groupDataMap = groupname
}
}
})
setMemberInfo(groupDataMap)
}, []);
提示： 請將此類似案例參考您的問題
uj5u.com熱心網友回復：
您將不得不使用 react 的 useEffect 掛鉤來設定狀態。
使用此鏈接作為參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/464793.html
標籤：javascript 反应 firebase-实时数据库 使用状态
上一篇：com.sun.net.HttpServer SheduleExecutorService sheduleWithFixedDelay-命令可運行請幫助