为什么<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>
</ul>
</div>
)
回答
这里发生的事情很可能是：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>
{ docs.map(doc =>
<li>
<span>{ doc.data().name }</span>
{ /* Add your other spans here */ }
</li>
)}
</ul>
</div>
)