小编Nin*_*lex的帖子

为什么 <ul> 渲染两次?

所以我正在从 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>
    )
Run Code Online (Sandbox Code Playgroud)

html javascript firebase google-cloud-firestore

1
推荐指数
1
解决办法
66
查看次数