Question

这段代码有效，当我在 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]) 完美运行。它准确打印出我需要的值。

Answer 1

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

但是，当您的第二个 useEffect 触发时，状态 'video' 仍然设置为空数组。因此 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])

因此，如果处于 'video' 状态的数组包含 0 个以上的项目，您只会调用 fetchData() 函数，并将其添加到 useEffect 依赖数组中，因此每次 'video' 更改时都会运行 useEffect。< /p>

如何从 Firestore 查询声明变量？

1 个答案: