除非我刷新，否则反应不会更新喜欢和不喜欢的值答案

【问题标题】：React not updating the value of likes and dislikes unless I refresh除非我刷新，否则反应不会更新喜欢和不喜欢的值
【发布时间】：2020-09-27 12:46:48
【问题描述】：

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

将喜欢和不喜欢的数组（对象）从 firebase 设置为 useEffect 中的钩子

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>

点击函数将新的反应对象添加到firebase中的数组中

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)
    } 
  }

提前感谢您的帮助

【问题讨论】：

检查你是否存储['dislikes'] 是一个数组而不是一个对象（大多数时候，firebase 将所有内容都存储为一个对象）
@phoenixstudio 在 Firebase 中检查“喜欢”和“不喜欢”字段时，将其悬停在括号“（数组）”中。这就是我想要的吧？
是的数组就是你要找的

标签： reactjs firebase react-hooks

【解决方案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，它可能不是正确的解决方案，但希望听到人们找到更好的方法。

【讨论】：