如何使用 React 中的 Map 函数渲染 Firestore 集合？答案

【问题标题】：How do I render Firestore collection using the Map function in React?如何使用 React 中的 Map 函数渲染 Firestore 集合？
【发布时间】：2021-04-19 02:24:10
【问题描述】：

我很难理解如何从 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 is not iterable 错误。

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

知道为什么会发生这种情况吗？任何帮助，将不胜感激！我已经花了将近一整天的时间，但没有任何进展>.

console.log 返回数据时

[] 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

【问题讨论】：

在此处发布您的 console.log
@Pushkin 我已在详细信息中添加了我的 console.log - 请检查。它返回数据，但不是列表格式，这是我想要的

标签： reactjs firebase google-cloud-firestore react-component

【解决方案1】：

错误不在.map，错误在setList

您已将列表创建为数组

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

但是当你设置它的时候，你就是把它变成一个对象

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

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

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

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

【讨论】：

嗨@Pushkin，感谢您的回答，但它给了我一个TypeError：prevState.list is not iterable - 请参阅下面的日志（匿名函数）src/components/ItemList.js:13 10 | generateWishlist(currentUser).then((snapshot) => { 11 | snapshot.docs.forEach((doc) => ( 12 | //setList(doc.data()) > 13 | setList(prevState => ([. ..prevState.list, doc.data()])) | ^ 14 | //console.log(doc.data()) 15 | )) 16 | })
抱歉，打错字了。现在检查。应该只是prevState，而不是prevState.list