reactjs - 创建加载程序

Question

所以我正在尝试使用 React 和 firebase firestore 制作一个加载屏幕。基本上，每当我的应用程序从 firestore 获取数据时，我想创建一个加载程序。

编辑:例如，我尝试做类似的事情:

const [data, setData]=useState([])
const [loader, setLoader]=useState(false)


db.collection('conversations').doc(id).onSnapshot(snap=>{
setData(snap.data())
}).then(()=>{
setLoader(true)
})

但这会将加载器设置为 true，但我想在访问数据之前将加载器设置为 true，一旦检索到数据，我想将加载器设置为 false。

有什么建议吗？

Answer 1

.onSnapShot() 不会做你认为它会做的事情 - 它附加一个监听器来更改文档，该监听器总是至少触发一次，然后进行任何进一步的更改 - 但不一定立即!它也不返回 promise ；它返回一个取消订阅函数 - 当作为 useEffect Hook 的一部分时很有用。

您的代码中发生的情况是附加了监听器，然后由于 Javascript 事件而立即调用 setLoader(true)在调用监听器函数之前循环。

如果您希望在最小值返回数据后调用setLoader(true)你需要:

db.collection('conversations').doc(id).onSnapshot(snap=>{
setData(snap.data())
setLoader(true)
})

我会注意到，这本身并不能处理快照中可能出现的错误。

它更可能是 useEffect Hook 的一部分，这将有助于在卸载组件时卸载监听器

useEffect(() => {
  return db
  .collection('conversations')
  .doc(id)
  .onSnapshot(snap=>{
    setData(snap.data());
    setLoader(true)
  })
}, []);

如果，otoh，您只想获取一次文档，您将需要使用 .get()，它确实返回带有 DocumentSnapshot 的 promise

db.collection('conversations').doc(id).get().then(snap=>{
setData(snap.data())
}).then(()=>{
setLoader(true)
})

按照评论中的要求，对于单次提取:

useEffect(() => {
  // no need for a return for a single get
  setLoader(true)
  db
  .collection('conversations')
  .doc(id)
  .get()
  .then(snap=>{
    setData(snap.data());
    setLoader(false);
  })
}, [*whatever state variable will change to start the process*]);

...对于听众(上面)，采取完全不同的方法:

const [data, setData]=useState([])
const [loader, setLoader]=useState(true) //DEFAULTS TO LOADING

useEffect(() => {
  return db
  .collection('conversations')
  .doc(id)
  .onSnapshot(snap=>{
    setData(snap.data());
    setLoader(false) //when the data is ready THE FIRST TIME
  })
}, []);

对于监听器的任何更新，无需执行任何操作将状态设置为 LOADING - 这将由状态管理和 setData() 处理。每次 Firestore 调用监听器时，这些更改都会显示在后续渲染中