React.js增减按钮计数状态异常，求逻辑排查与简化实现方案

原代码的核心问题 #

• 状态冗余：likeCount、dislikeCount属于衍生状态，完全可以通过like、dislike的布尔值直接计算得到，没必要单独维护并通过useEffect同步。这种冗余不仅增加了代码复杂度，还可能因状态同步时机引发不必要的渲染或潜在的状态不一致问题。

简洁实现方案 #

直接移除冗余计数状态，在渲染时将布尔状态转换为对应数值，同时简化点击逻辑：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [liked, setLiked] = useState(false);
  const [disliked, setDisliked] = useState(false);

  const handleLikeToggle = () => {
    setLiked(prev => !prev);
  };

  const handleDislikeToggle = () => {
    setDisliked(prev => !prev);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleLikeToggle}>
        Smile ({liked ? 1 : 0})
      </button>
      <button type="button" onClick={handleDislikeToggle}>
        Sad ({disliked ? 1 : 0})
      </button>
    </div>
  );
}

优化说明 #

1. 移除冗余状态：不再维护likeCount和dislikeCount，直接通过liked ? 1 : 0在渲染时计算显示数值，避免额外的状态同步逻辑。
2. 函数式更新保障准确性：使用prev => !prev的方式更新状态，确保获取到最新的状态值，避免闭包导致的状态更新异常。
3. 简化代码结构：去掉不必要的useEffect，让逻辑更直观，减少潜在bug点。

如果需要支持「同一时间只能点赞或点踩」的交互规则，可以进一步优化点击逻辑：

const handleLikeToggle = () => {
  setLiked(prev => !prev);
  if (disliked) {
    setDisliked(false);
  }
};

const handleDislikeToggle = () => {
  setDisliked(prev => !prev);
  if (liked) {
    setLiked(false);
  }
};

内容的提问来源于stack exchange，提问作者Ven Nilson