未定义从firebase获取数据

Question

我在尝试从 Firestore 检索数据时遇到了一个小问题。第一个结果给了我未定义的结果，然后我得到了我的结果。问题是我无法制作 .map，因为它告诉我用户未定义。

const [users, setUsers] = useState()

    useEffect(() =>{

        const db = Firebase.firestore()
        db.collection('users').get()
        .then(querySnapshot => {
            const data = querySnapshot.docs.map(doc => doc.data())
            setUsers({ users: data });
            console.log(users);
        })
    })

    return (
        <div>
            <p>
                USERS
            </p>
            <div>
                {
                    users.map(user => {
                        <p>{user.name}</p>
                    })
                }
            </div>
        </div>
    )

Code result

你知道为什么吗？谢谢！

Answer 1

您示例中的用户是未定义的。

要为 useState 挂钩定义默认值，请将其键入到括号中。尝试用下面的示例替换您的第一行：

const [users, setUsers] = useState({users: []}) //defines the default state of users

//or

const [users, setUsers] = useState( [] )

此外，您似乎在使用users 和users.users 之间切换。选择一种方法并坚持下去。

以下是我将如何处理此问题的完整示例：

const [users, setUsers] = useState([])

useEffect(() => {
    const db = Firebase.firestore()
    db.collection('users').get()
        .then(querySnapshot => {
            const data = querySnapshot.docs.map(doc => doc.data())
            setUsers(data);
            console.log(users);
        })
}, [])

return (
    <div>
        <p>
            USERS
        </p>
        <div>
            {users.map(user => <p>{user.name}</p>}
        </div>
    </div>
)