作者：手浪用户2602901267 | 来源：互联网 | 2023-08-24 16:27
所以我正在从firebasefirestore收集一些数据，我想显示它。我设法通过.get()方法获取数据。但由于某种原因，数据被显示了两次。这是ReactJS应用
所以我正在从 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 (
)
回答
这里发生的事情很可能是：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 (
{ docs.map(doc =>
{ doc.data().name }
{ /* Add your other spans here */ }
)}
)
京公网安备 11010802041100号