Question

我正在为我的应用程序使用 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

Answer 1

设置状态时不需要 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;
 }

通过这种方式，您只需设置一次状态，从而避免不必要的重新渲染，并且您可以保存所有文档而不是覆盖它们。

反应本机状态 console.log

1 个答案: