React Firebase读取数据导致渲染过多

Question

我的react项目使用Firebase实时数据库。我试图遵循firebase文档并使用"；onValue(("以检索数据。这是我的代码：

export default function Home() {

const {currentUser} = useAuth();
const [userinfo,setUserinfo] = React.useState();
const uid = currentUser.uid
const db = getDatabase();
onValue(ref(db,`users/${uid}`),snapshot=>{
const data = snapshot.val();
setUserinfo(data);
})

console.log(userinfo);

return (
<main id="home">
<Hero />
</main>
)
}

这将导致重新渲染过多的错误。我不知道如何检索数据。如果我使用

onValue(ref(db,`users/${uid}`),snapshot=>{
const data = snapshot.val();
console.log(data);
})

那么正确的数据就会在控制台中打印出来，非常好。我还尝试了以下内容：

let info;
onValue(ref(db,`users/${uid}`),snapshot=>{
const data = snapshot.val();
info = data;
})
console.log(info)

但信息是未定义的。我似乎搞不清这里的问题。如何使用数据？

Answer 1

由于您没有使用任何生命周期挂钩或函数来更新/更改状态值，它会抛出错误，导致过多的重新渲染。一旦更新状态，它将再次重新渲染整个组件，然后再次更新状态，循环中也会发生同样的事情，导致过多次重新渲染
因此，为了避免这种情况，您需要将负责侦听来自DB的更改并更改状态的代码放入块中，该块只会在特定事件或函数调用等时被调用。

在您的情况下，我建议使用useEffect挂钩。参见以下代码-

export default function Home() {
const { currentUser } = useAuth();
const [userinfo, setUserinfo] = React.useState();
const uid = currentUser.uid
const db = getDatabase();
// this useEffect will get called only 
// when component gets mounted first time
useEffect(() => {
// here onValue will get initialized once
// and on db changes its callback will get invoked
// resulting in changing your state value
onValue(ref(db, `users/${uid}`), snapshot => {
const data = snapshot.val();
setUserinfo(data);
})
return () => {
// this is cleanup function, will call just on component will unmount
// you can clear your events listeners or any async calls here
}
}, [])
console.log(userinfo);
return (
<main id="home">
<Hero />
</main>
)
}

注意-我最近没有使用firebase实时数据库，但通过查看代码和错误，我添加了这个答案，让我知道是否有什么需要更正。