javascript - Firestore - 如何在我的状态下添加文档 ID 及其数据？

Question

在我来自 Firestore 的数据库中，每个用户都有一个名为 Apps 的子集合。我需要在我的状态中添加每个文档的 ID 及其数据。我知道如何在我的状态下添加数据，使用以下代码 setApps(data.docs.map(doc => doc.data())) 我知道如何获取每个的 ID文档 data.docs.map(doc => console.log(doc.id, doc.data()))。

但是如何在状态中同时添加 doc.id 和 doc.data() 呢？

感谢您的帮助。

function AppList() {
   
    const [apps, setApps] = React.useState([])

    React.useEffect(() => {
        const fetchData = async () => {
            const db = firebase.firestore()
            var user = firebase.auth().currentUser;

            if (user != null) {
                var uid = user.uid
                const data = await db
                .collection('Users').doc(uid)
                .collection('Apps').get()
                
                //Add the data of each doc in my state
                setApps(data.docs.map( doc => doc.data()));
    
                //Get the document ID
                data.docs.map(doc => 
                    console.log(doc.id, '=>', doc.data())
                );
            }
        }
        fetchData()
    }, [])

    return (
        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> 
        {apps.map(app => (
            <Col className="gutter-row" span={100}>
                <Card
                style={{ width: 300, marginTop: 16}}
                actions={[
                    <Button type="default" size='middle'>
                    <Link to={app.appName}>    
                        <EditOutlined /> 
                        <span> Edit the app </span>
                    </Link>
                    </Button>,
                    ]}>
                    <Meta
                    title= {app.appName}
                    description={app.description}
                    />
                </Card>   
            </Col>
        ))}
        </ Row>  
    );
}

Answer 1

我终于找到了解决办法

setApps(data.docs.map(doc => {return {...doc.data(), id: doc.id} }));