reactjs - 我正在取回数据，但数组长度返回为 0

Question

我正在尝试从 firebase 获取数据并正确控制日志，但数组显示长度为 0

useEffect(() => {
    let items = [];
    const unsubscribe = store
      .collection('users')
      .doc(user.uid)
      .collection('redirects')
      .onSnapshot(snapShot => {
        snapShot.forEach(getPath => {
          const { path } = getPath.data();
          store.doc(path).onSnapshot(doc => {
            const data = doc.data();
            items.push({ ...data });
          });
        });
      });
    setDocs(items);
    setIsLoading(false);
    return () => unsubscribe();
  }, []);

  console.log(docs);

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

Answer 1

尝试这样的事情：

您的 setState 调用应该在onSnapShot(()=>{})回调中，因为它是异步的。你正在做的方式，你基本上是试图setDocs()用一个空items数组调用。

useEffect(() => {
    let items = [];
    const unsubscribe = store
      .collection('users')
      .doc(user.uid)
      .collection('redirects')
      .onSnapshot(snapShot => {
        snapShot.forEach(getPath => {
          const { path } = getPath.data();
          store.doc(path).onSnapshot(doc => {
            const data = doc.data();
            items.push({ ...data });
          });
        });
        setDocs(items);
        setIsLoading(false);
      });
    //setDocs(items);
    //setIsLoading(false);
    return () => unsubscribe();
  }, []);