未捕获的类型错误：postList.map 不是 function

Question

const [postList, setPostList] = useState([])

const q = query(collection(db, "examples"), where("title", "==", title))
try {
  const posts = await getDocs(q)
  posts.forEach((doc) => {
    console.log(doc.data())
  })
} catch (e) {
  console.log(e.message)
}

我试图检查从控制台查询中获得的文档列表。 日志，列表很好，这是我所期望的。 我遇到的问题是，我不确定我是否做对了，当我尝试将我查询的文档列表设置为 state object 时。 下面是我所做的

const q = query(collection(db, "examples"), where("title", "==", title))
try {
  const posts = await getDocs(q)
  posts.forEach((doc) => {
    setPostList(...postList, doc.data())
  })
} catch (e) {
  console.log(e.message)
}

我随后尝试将我想要的 map 数据放入组件中。 它说

“未捕获的类型错误：postList.map 不是函数”。

请告知我如何将doc.data()放入可迭代中。 谢谢。

Answer 1

在这种情况下， postList必须是一个数组，因此您可以使用map() 。 但是setPostList(...postList, doc.data())将是 object。 尝试重构代码，如下所示：

const posts = await getDocs(q)
const data = posts.docs.map((doc) => ({ id: doc.id, ...doc.data() }))

setPostList(data)