如何解决反应本机状态 console.log
我正在为我的应用程序使用 firebase,我想将读取的数据置于状态以在不同的地方使用它。
它有点工作,但是当我想要 console.log 状态时,它每秒更新 30 次,我做错了什么吗?
这是我的代码
const db = firebase.firestore();
const [PBS1Detail,setPBS1Detail] = useState();
db.collection('Track').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderTracks(doc)
}
)
});
const renderTracks = (doc) => {
let data = doc.data().data[0].Module;
return setPBS1Detail(data);
}
console.log(PBS1Detail)
我已经尝试将它存储在变量而不是状态中,但这对我不起作用,我无法从全局函数中获取变量
我是菜鸟我明白了xd
解决方法
设置状态时不需要 return 语句。此外,看起来您正在执行一些异步功能,这意味着当您的组件第一次呈现时,PBS1Detail 将是未定义的,因为 db 是一个挂起的 Promise。
您可以/应该将异步函数放在 useEffect 钩子中:
useEffect(()=> {
db.collection('Track').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderTracks(doc)
}
)
});
},[])
const renderTracks = (doc) => {
let data = doc.data().data[0].Module;
setPBS1Detail(data);
}
最后,您的 renderTracks 函数似乎不正确,因为您似乎每次都在遍历文档并重置状态。
相反,可以考虑为 PBS1Detail 设置一个数组
const [PBS1Detail,setPBS1Detail] = useState([]);
然后修改您的异步调用:
useEffect(()=> {
db.collection('Track').get().then((snapshot) => {
let results = []
snapshot.docs.forEach(doc => {
results.push(renderTracks(doc))
}
)
setPBS1Detail(results)
});
},[])
const renderTracks = (doc) => {
return doc.data().data[0].Module;
}
通过这种方式,您只需设置一次状态,从而避免不必要的重新渲染,并且您可以保存所有文档而不是覆盖它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。