如何在 React 中使用 Map 函数渲染 Firestore 集合？

Question

我很难理解如何从 Firestore 集合中呈现数据。到目前为止，这是我正在做的事情：在 /services/firestoreQueries:

const generateWishlist = (user) => {

    return db.collection('wishlist').where("username", "==", user.uid).get()

}

在我的组件文件中：

const ItemList = () => {
const {currentUser} = useAuth()
const [list, setList] = useState([])

useEffect(() => {
    generateWishlist(currentUser).then((snapshot) => {
        snapshot.docs.forEach((doc) => (

            setList(prevState => ({
                list: [...prevState.list, doc.data()]
            }))

            ))
    })
}, [currentUser])

console.log(list)


return (
    <div>
    <div>
        <h1>This is your wishlist!</h1>
    </div>
    </div>

)
}

我收到 prevState.list 不可迭代错误。

如果我注释掉快照和 console.log(list) 中的代码块，我会按预期获得数据，但是当我尝试映射它时，它说 list.map 不是函数

知道为什么会这样吗？任何帮助，将不胜感激！我花了将近一整天但没有任何进展>.<

console.log当它returns数据

[] ItemList.js:23 
{description: "i am testing", username: "CLmf7rX6I2YQsuAojqsJ3uWGqHD3", price: "10", item: "testing", live: true, …} ItemList.js:23 
{description: "i am testing", username: "CLmf7rX6I2YQsuAojqsJ3uWGqHD3", price: "10", item: "testing", live: true, …} ItemList.js:23

Answer 1

错误不在.map，错误在setList

您已将列表创建为数组

const [list, setList] = useState([])

但是当你设置它时，你正在将它更改为一个对象

setList(prevState => ({
   list: [...prevState.list, doc.data()]
}))

// list => {list: [...]}

使用 setList 作为钩子而不是 this.setState

setList(prev => ([...prev, doc.data()])

如何在 React 中使用 Map 函数渲染 Firestore 集合？

How do I render Firestore collection using the Map function in React?

firebase

reactjs

google-cloud-firestore

react-component