反应本机状态 console.log

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)

我已经尝试将它存储在变量而不是状态中，但这对我不起作用，我无法从函数 global

中获取变量

我是菜鸟我明白了xd

Answer 1

设置状态时不需要 return 语句。此外，看起来您正在执行一些异步功能，这意味着当您的组件第一次呈现时，PBS1Detail 将是未定义的，因为数据库是一个待定的 Promise。

您 could/should 将您的异步函数放在 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

React Native state console.log

firebase

react-native

react-state