95%的时间都能正常工作
其他5%我喜欢超越，并添加或删除一个额外的喜欢或两个（如果我继续点击），直到它停止，并认为一秒钟，然后回到正确的价值

const OnePost = () => {

  const post = useSelector(state => state.post.post_id);
  const user = useSelector(state => state.auth.user);

  const postLikes = post.likedBy?.length;
  const alreadyLiked = post.likedBy?.map(el => el.Likes.user_id).includes(user.id);
  const [likes, setLikes] = useState(postLikes);
  const [isLiked, setIsLiked] = useState(alreadyLiked);

  const { id } = useParams();
  const dispatch = useDispatch();

  const navigate = useNavigate();

  const openUserPageHandler = () => {
    dispatch(getOneUser(post.user_id))
  }

  const likePostHandler = () => {
    if (alreadyLiked) {
      setLikes(prev => prev - 1);
      setIsLiked(false)
      dispatch(upvotePost(id));
    } else {
      setLikes(prev => prev + 1);
      setIsLiked(true)
      dispatch(upvotePost(id))
    }
  }

  useEffect(() => {
    dispatch(getOnePost(id))
    console.log('likes changed');
  }, [likes])

  useEffect(() => {
    setLikes(postLikes)
    setIsLiked(alreadyLiked)
    console.log('set likes');
  }, [postLikes, alreadyLiked])

  const avatar = `http://localhost:3001${post.userAvatar}`
  const createdAt = new Date(post.createdAt).toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
  const comments = useSelector(state => state.comment.comments);

  useEffect(() => {
    dispatch(getPostComments(id));
  }, [])

  return (
    <>

      <div className='one-post__container'>
        <div className='one-post'>
          <div className='one-post__info'>
            <div className='one-post__info__head'>
              <div onClick={() => navigate(-1)}>
                <ArrowBackIcon className='one-post__back__arrow' />
              </div>
              <span className='profile__name'>
                <h3>Tweet</h3>
              </span>
            </div>
            <div className='one-post__info__mid'>
              <Link to={`/user/${post.userId}`} className='one-post__link'>
                <div className='one-post__name' onClick={openUserPageHandler}>
                  <img src={post.userAvatar ? avatar : default_avatar} alt='' className='one-post__profile__avatar' />
                  <h4 className='one-post__user__name'>{post.userName}</h4>
                </div>
              </Link>
              <div className='one-post__options'>
                <MoreHoriz />
              </div>
            </div>

            <div className='one-post__body'>{post.text}</div>
            <div className='one-post__footer'>
              <div className='one-post__time'>{createdAt}</div>
              <div className='one-post__icons'>
                <div className='one-post__icons__options'>
                  <ChatBubbleOutline fontSize='small' />
                </div>
                <div className={isLiked ? 'heart active' : 'heart'}>
                  <FavoriteBorderOutlined fontSize='small' onClick={likePostHandler} />
                  {likes > 0 ? likes : null}
                </div>
              </div>
            </div>
          </div>
        </div>
        <CommentForm />
        <ul className='comments__list'>
          {comments.map((el) => (
            <li key={el.id}>
              <Comment
                id={el.id}
                text={el.text}
                createdAt={el.createdAt}
                userId={el.User?.id}
                userName={el.User?.name}
                userAvatar={el.User?.avatar}
              />
            </li>
          ))}
        </ul>
      </div >

如果你想创建一个高性能的社交网络，你可以遵循许多平台使用的通用方法。当用户执行一个动作时，比如喜欢一个帖子，你可以向后端发送一个请求，并使用React.useState来更新liked show的值，如果你愿意的话，还可以添加一些样式。这样，执行该操作的用户将被通知其操作。此外，当另一个用户登录时，他们将能够看到其他用户所做的喜欢，因为更新的数据被提取。Twitter有效地实现了这种行为。
存在另一种方法，Socket.io当另一个用户执行诸如喜欢帖子之类的动作时，可以利用www.example.com向用户发送实时更新。当用户喜欢某个帖子时，您可以通过Socket.io向服务器发送事件，然后服务器将此信息广播给所有其他连接的用户。因此，其他用户将收到此实时更新，并能够看到其他用户执行的操作，而无需刷新页面。check the documentation of socket.io

如上所述，将API调用与useState一起使用。下面是useMutation的一个例子（来自Tanstack Query（react query））：

const likeCommentMutation = useMutation({
    mutationFn: (comment_id) => {
      likeComment(comment_id);
    },
    onSuccess: () => {
      setLiked((current) => !current);
      if (liked) {
        setLikes((current) => {
          return current - 1;
        });
      } else {
        setLikes((current) => {
          return current + 1;
        });
      }
    },
    onError: () => {
      //error handling
      );
    },
  });

  const onLikedHandler = () => {
    likeCommentMutation.mutate(reply.id);
  };

而“like”按钮可以是这样的：

<button
          onClick={onLikedHandler}
          disabled={!user_id}
          className="material-symbols-outlined"
        >
          {!liked ? "favorite" : "heart_check"}
          <span className={classes.likes_num}>{likes}</span>
        </button>