React实现点赞踩toggle按钮功能失效，flag变量总是被重置问题求助

• 你代码中用var声明的flag、disliked都属于普通JS变量，不属于React管理的状态。只要你调用setDislike/setScore等状态更新方法触发组件重渲染，这些普通变量都会被重新初始化回初始值，自然永远触发不到flag===1的判断分支。
• 你直接修改idea对象属性的写法不符合React不可变更新原则，属于副作用写法，可能导致状态不同步。
• 你声明的dislike状态完全没有用到，按钮背景色判断逻辑写反了判断对象。

直接用useState存储是否踩过的状态，替换普通变量，调整逻辑如下：

// 存储是否已踩的状态，替代原来的flag和普通disliked变量
const [disliked, setDisliked] = useState(false);
// 如果idea是接口返回的建议本地用useState存储做不可变更新，示例假设你已有初始idea数据
const [idea, setIdea] = useState(/* 你的初始idea对象 */);
const [isPending, setIsPending] = useState(true);

const toggleDislike = () => {
  if (!disliked) {
    // 未踩状态，点击后踩数+1，标记为已踩
    setIdea(prev => ({
      ...prev,
      dislike: prev.dislike + 1
    }));
    setDisliked(true);
  } else {
    // 已踩状态，点击后踩数-1，标记为未踩
    setIdea(prev => ({
      ...prev,
      dislike: prev.dislike - 1
    }));
    setDisliked(false);
  }
}

// 点赞逻辑后续可以复用相同实现思路，这里按你要求暂时忽略
const incrmentLike = () => {
  // 后续可参考toggleDislike的不可变更新逻辑修改
}

return(
  <div className="idea-details">
    {isPending && <div>加载中...</div>}
    {idea && (
      <article>
        <h2>{idea.ideaTitle}</h2>
        <p>Written by {idea.author}</p>
        <div>{idea.body} </div>
        <div>{idea.score} Likes {idea.dislike} Dislikes</div>
      </article>
    )}
    <a type="button" className={classNameLU} id="button2" title="button" onClick={incrmentLike}>Like!</a>
    <div
      className="btn btn-warning btn-lg"
      {/* 直接用disliked状态判断背景色 */}
      style={{ backgroundColor: disliked ? "#35b5f1" : "#8b8b8b" }}
      id="toggleDiv"
      onClick={toggleDislike}
      >
      Dislike
    </div>
  </div>
);

后续如果要实现点赞踩互斥逻辑，只需要新增liked状态，在toggleDislike执行时判断如果liked为true，先把点赞数减1、liked设为false即可。所有需要跨渲染保留的状态都必须通过useState/useReducer等React状态API声明，不要用普通var/let变量存储需要持久化的状态。

内容的提问来源于stack exchange，提问作者Andrew Viera