如何结合函数与Redux实现点赞统计的重新渲染？

我查了很多统计相关文档，还是没找到重新渲染统计数据的办法。我用的是Redux，但感觉问题和reducer、action没关系。我只靠一个onClick函数处理点赞/取消点赞的状态，另外两个函数根据条件展示结果。

相关代码 #

组件内逻辑函数 #

const likesData = useSelector((state) => state.likesReducer);

const handleLikes = async () => {
    let id = userData.id;
    let idComment = comment.idObject;
    dispatch(likesComment(id, idComment)).then(() =>  
        dispatch(getComment()))  
};

const isLiked = () => {
  return Array.from(likesData).filter(likes => likes.id === userData.id && likes.idComment === comment.idObject).length > 0;
 };
 
 const returnLikes = (commentId) => {
  return Array.from(likesData).filter(likes => likes.idComment === commentId).length;
};

渲染代码 #

<div className="home-icon-post" onClick={() => handleLikes()} > 
    <FontAwesomeIcon 
        className={`${isLiked(comment.idObject) ? "heartFull" : "heartEmpty"}`}  
        icon={["fa","heart"]} 
    />
</div>
<span>
    <p>{returnLikes(comment.idObject)}</p>
</span>

点赞Action说明 #

异步Action likesComment 负责向后端发送点赞/取消点赞请求，请求完成后会dispatch同步Action（如ADD_LIKE或REMOVE_LIKE）更新Redux状态。

点赞Reducer说明 #

Reducer接收ADD_LIKE和REMOVE_LIKE类型的Action，通过返回新数组的方式更新likesReducer的状态（添加或移除对应点赞记录）。

问题排查与解决方法 #

1. isLiked函数调用与定义不匹配 #

渲染时调用了isLiked(comment.idObject)，但函数定义没有接收参数，导致判断逻辑使用的是外部固定的comment.idObject，无法正确识别当前评论的点赞状态。

修正代码：

const isLiked = (commentId) => {
  // 用some替代filter.length>0，逻辑更高效直观
  return Array.from(likesData).some(likes => likes.id === userData.id && likes.idComment === commentId);
};

2. 确认Redux状态更新的不可变性 #

Redux要求状态更新必须返回新的引用，不能直接修改原数组。如果Reducer里用了push/splice这类修改原数组的方法，useSelector会认为状态没有变化，组件不会重新渲染。

正确的Reducer写法示例：

// 添加点赞
case 'ADD_LIKE':
  return [...state, action.payload];

// 移除点赞
case 'REMOVE_LIKE':
  return state.filter(item => item.id !== action.payload.id || item.idComment !== action.payload.idComment);

3. 避免闭包导致的旧值问题 #

如果userData、comment是动态变化的，handleLikes函数可能捕获到旧值，导致dispatch的参数错误。用useCallback包裹函数并添加依赖项：

修正代码：

import { useCallback } from 'react';

const handleLikes = useCallback(async () => {
  const id = userData.id;
  const idComment = comment.idObject;
  await dispatch(likesComment(id, idComment));
  dispatch(getComment());
}, [userData.id, comment.idObject, dispatch]);

4. 验证状态更新流程 #

• 打开Redux DevTools，点击点赞按钮后，检查likesReducer的状态是否正确更新。
• 在组件内添加console.log(likesData)，确认状态更新后组件是否重新渲染。
• 确认returnLikes函数能正确读取最新的likesData，计算出正确的点赞数。

内容的提问来源于stack exchange，提问作者Elodie Jean