javascript - 记录数据但不渲染 p 标签，为什么？

Question

我正在使用firebase firestore并且我获取了数据，一切正常，但是当我将它传递给某个组件时，只有一个项目被传递，但日志正确显示了所有元素。我刚刚开始学习 react ，感谢任何帮助。

import React, { useEffect, useState } from 'react'
import { auth, provider, db } from './firebase';
import DataCard from './DataCard'

function Explore() {
    const [equipmentList, setEquipments] = useState([]);

    const fetchData = async () => {
        const res = db.collection('Available');
        const data = await res.get();

        data.docs.forEach(item => {
            setEquipments([...equipmentList, item.data()]);
        })
    }

    useEffect(() => {
        fetchData();
    }, [])

    equipmentList.forEach(item => {
        //console.log(item.description);
    })

    const dataJSX =
        <>
            {
                equipmentList.map(eq => (
                    <div key={eq.uid}>

                        {console.log(eq.equipment)}
                        <p>{eq.equipment}</p>
                    </div>
                ))

            }
        </>

    return (
        <>
            {dataJSX}
        </>
    )
}

export default Explore

标签： javascriptreactjs

Answer 1

您在将获取的数据设置为状态时遇到问题。

您需要在setEquipments准备好数据时调用一次，因为您总是用一个初始数组加上一个来自 forEach 的项目来擦除它。

设置设备的正确代码是

const fetchData = async () => {
        const res = db.collection('Available');
        const data = await res.get();

        setEquipments(data.docs.map(item => item.data()))
    }