Question

所以我正在从 firebase firestore 收集一些数据，我想显示它。我设法通过 .get() 方法获取数据。但由于某种原因，数据被显示了两次。这是 React JS 应用程序
JS

    function renderList(doc) {
        let li = document.createElement('li')
        let name = document.createElement('span')
        let bloodGroup = document.createElement('span')
        let district = document.createElement('span')
        let phoneNumber = document.createElement('span')
        let vaccineDays = document.createElement('span')

        li.setAttribute('data-id', doc.id)
        name.textContent = doc.data().name;
        bloodGroup.textContent = doc.data().bloodGroup;
        district.textContent = doc.data().district;
        phoneNumber.textContent = doc.data().phoneNumber
        vaccineDays.textContent = doc.data().vaccineDays

        li.appendChild(name);
        li.appendChild(bloodGroup);
        li.appendChild(district);
        li.appendChild(vaccineDays);

        document.getElementById("donator-list").appendChild(li)


    }
    db.collection("donators").get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            renderList(doc)
        })
    })
    return (
        <div>
            <ul id="donator-list">

            </ul>
        </div>
    )

Answer 1

这里发生的情况很可能是：React 渲染多次（这是预期的），但在每次渲染时，您都手动添加到 DOM。

通常的 React 方法是：

拨打电话（可能在 Effect 内）
将您需要的数据存储在React State
在返回的 JSX 中，构建您想要显示的结构。

由于您的示例没有完整的组件，因此很难准确显示，但这大致是我期望的样子：

const [docs, setDocs] = useState([])

/* 
* I would expect this call to be made inside an effect,
* so you don't do it every render, but I don't know what you 
* would want to trigger it, so it's running on first load.
*/
useEffect(() => {
    db.collection("donators").get().then((snapshot) => {
        setDocs(snapshot.docs)
    })
}, [])

return (
    <div>
        <ul id="donator-list">
            { docs.map(doc => 
                 <li>
                     <span>{ doc.data().name }</span>
                     { /* Add your other spans here */ }
                 </li>
            )}
        </ul>
    </div>
)

为什么 <ul> 渲染两次？

1 个答案: