React & Firebase：如何实时更新集合中特定文档的计数？

Question

问题:如何在每次点击时增加用户在其文档中的点数，并实时显示结果?

我知道实时使用快照侦听器，但我似乎不能使它快速工作。

const handleClick = (e) => {
e.preventDefault()
const userId = e.target.id
db.collection('users').doc(userId)
.update({
housePoints: db.FieldValue.increment(1)
});

下面是该组件的完整代码，以提供我所遇到的问题的总体视图。

import './ClassStats.scss';
import React, { useState, useEffect } from 'react';
import Sidebar from '../../components/sidebar/Sidebar';
import Navbar from '../../components/navbar/Navbar';
import StudentView from '../../components/StudentView/StudentView';
import {
collection,
doc,
onSnapshot,
updateDoc,
serverTimestamp,
setDoc,
} from 'firebase/firestore';
import { db } from '../../firebase';
const ClassStats = () => {
const [data, setData] = useState([]);
useEffect(() => {
//LISTEN IN REAL TIME
const unsub = onSnapshot(
collection(db, 'users'),
(snapshot) => {
let list = [];
snapshot.docs.forEach((doc) => {
list.push({ id: doc.id, ...doc.data() });
});
console.log(list);
setData(list);
},
(err) => {
console.log(err);
}
);
return () => {
unsub();
};
}, []);
const handleClick = (e) => {
e.preventDefault()
const userId = e.target.id
db.collection('users').doc(userId)
.update({
housePoints: db.FieldValue.increment(1)
});

}
return (
<div className="classStats">
<Navbar />
<div className="classStatsContainer">
<Sidebar />
<div className="test">
<ul className="students">
{data.map((item) => (
<StudentView key={item.id} {...item} onClick={handleClick} />
))}
</ul>
</div>
</div>
</div>
);
};
export default ClassStats;

谢谢

Answer 1

问题解决。我希望这是最好最有效的方法。

const handleClick = async (e) => {
e.preventDefault()
const userId = e.target.id
const docRef = doc(db,'users', userId);
await updateDoc(docRef, {
housePoints: increment(1)
});
}