如何从 Firestore 查询中声明变量？答案

【问题标题】：How to declare a variable from a firestore query?如何从 Firestore 查询中声明变量？
【发布时间】：2021-03-17 23:36:56
【问题描述】：

当我在 Visual Studio 代码中按保存时，这段代码工作。但是，如果我在浏览器中刷新预览页面，它会显示此错误：未处理的拒绝（FirebaseError）：使用无效数据调用的函数 Query.where()。不支持的字段值：未定义

let { id } = useParams();
const [video, setVideo] = React.useState([]);
const [show, setShow] = React.useState([]);
const classes = useStyles();

React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const data = await db
      .collection("videos")
      .where('path', '==', id)
      .get()
      setVideo(data.docs.map(doc => doc.data()));
    }
    fetchData()
    
  }, [])

let showUrl = video.map(video =>(video.uploadBy));
console.log(showUrl[0]);
let videoDate = video.map(video =>(video.date.toDate()));
console.log(videoDate[0]);

React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const data = await db
      .collection("shows")
      .where('urlPath', '==', showUrl[0])
      .get()
      setShow(data.docs.map(doc => doc.data()));
    }
    fetchData()
  }, [])

我认为问题在于我试图以错误的方式声明变量“showUrl”。 console.log(showUrl[0]) 完美运行。它准确地打印出我需要的值。

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

这两个 useEffect 调用都会在组件安装后立即触发。如果您从 url 参数等中获取第一个 useEffect 的 id，它可能会立即出现，并且调用 Firestore 查询应该可以工作。

但是，当您的第二个 useEffect 触发时，状态“视频”仍设置为空数组。因此showUrl变量也是一个空数组，showUrl[0]是未定义的。

你可以为你的第二个 useEffect 做的是：

   React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const data = await db
      .collection("shows")
      .where('urlPath', '==', showUrl[0])
      .get()
      setShow(data.docs.map(doc => doc.data()));
    }
    video.length && fetchData()
   }, [video])

因此，只有在“视频”状态的数组有超过 0 个项目时才调用 fetchData() 函数，并将其添加到 useEffect 依赖数组中，因此每次“视频”更改时都会运行 useEffect。

【讨论】：