除非我刷新，否则不要更新喜欢和不喜欢的值

Question

我正在尝试为我正在创建的博客实现一个喜欢和不喜欢的系统。然而，例如，当单击"点赞"时，点赞数量不会增加，我必须刷新页面才能看到新值。我正在使用相同的方法来更新评论的数量，这似乎更新得很好。setState函数是useEffect中依赖数组的一部分。我试图将实际长度设置为useState属性(不在下面的代码中(，但这也不起作用。我做错了什么？

在使用中设置从火球到钩子的好恶数组

useEffect(():any => {
isMounted.current = true;
const db = fb.firestore();
const ref = db.doc(`posts/${props.match.params.id}`)
ref.get().then((doc: any) => {
if(doc.exists && isMounted.current) {
ref.get().then((doc: any) => {
if(doc.exists && isMounted.current) {
let store = doc.data()
setPostData(store);
setExistingComments(store.comments ? store.comments.reverse() : [])
setLikes(store['likes'] ? store['likes']  : []);
setDislikes(store['dislikes'] ? store['dislikes'] : []);
... other stuff
}, [setPostData, setExistingComments, props.match.params.id, setLikes, setDislikes, setUserHasDisliked, setUserHasLiked]);

JSX，它应该显示喜欢和不喜欢数组的当前长度

<img 
onClick={()=> onReactionClick("likes")} 
src={process.env.PUBLIC_URL + '/assets/like.svg'} 
className={userHasLiked ? 'liked' : ''}
/>
<span>{likes.length}</span>
<img 
onClick={()=> onReactionClick("dislikes")} 
src={process.env.PUBLIC_URL + '/assets/like.svg'}
className={userHasDisliked ? 'disliked' : ''} 
/>
<span>{dislikes.length}</span>

点击功能，将新的反应对象添加到火球中的阵列

const onReactionClick = (type: string) => {
if(type === "likes") {
setUserHasLiked(true)
setUserHasDisliked(false)
} else {
setUserHasDisliked(true)
setUserHasLiked(false)
}
if((type === "likes" && !userHasLiked) || type === "dislikes" && !userHasDisliked) {
addReaction(type, postData.content.id, fb.auth().currentUser?.displayName, fb.auth().currentUser?.uid, fb.auth().currentUser?.photoURL)
} 
}

提前感谢的帮助

Answer 1

我已经找到了让它工作的方法，但我不确定它有多干净。

在调用addReaction()函数的onReactionClick()函数中。我已经从该函数返回了新的obj，并使用likes.push()和返回的对象来触发状态更新，如下所示：

const newReaction = addReaction(type, postData.content.id, fb.auth().currentUser?.displayName!, fb.auth().currentUser?.uid!, fb.auth().currentUser?.photoURL!)
if(type === "likes") {
likes.push(newReaction)
} else {
dislikes.push(newReaction)
}

由于addReaction()函数基本上已经完成了这个逻辑，除了将其发送到firebase之外，它可能不是正确的解决方案，但很想听到人们找到任何更好的方法。