React中useState结合三元运算符失效，点赞数仅增不减问题求助

嘿，我一眼就发现问题所在啦！你的点赞数只增不减，核心原因是三元表达式的逻辑完全错了，而且你误解了setClick这个状态更新函数的返回值～

问题根源 #

你写的这段代码：

return setClick(!click) ? setLike(like - 1) : setLike(like + 1);

这里有两个关键错误：

1. setClick是React的状态更新函数，它没有返回值（或者说返回undefined），所以在三元判断里，setClick(!click)会被当作false处理，不管你点多少次，都会走到setLike(like + 1)的分支，这就是点赞数只涨不跌的直接原因。
2. 直接用当前的like和click值更新状态，可能会因为React状态更新的异步性，拿到旧的状态值，导致更新逻辑出错。

修复方案 #

我们需要先明确点击后的状态，再基于最新的状态来更新点赞数，推荐用函数式更新来确保拿到最新的状态值：

const onClick = () => {
  // 先计算点击后的新状态
  const newLikeStatus = !click;
  // 更新点击状态
  setClick(newLikeStatus);
  // 用函数式更新获取最新的点赞数，避免异步更新的旧值问题
  setLike(prevLike => newLikeStatus ? prevLike + 1 : prevLike - 1);
};

完整优化后的代码 #

import { useState } from 'react';

// 假设Like组件已正确定义
const YourComponent = ({ dataObj }) => {
  const [click, setClick] = useState(false);
  const [like, setLike] = useState(dataObj.likedCount); // 初始值为4

  const onClick = () => {
    const newLikeStatus = !click;
    setClick(newLikeStatus);
    setLike(prevLike => newLikeStatus ? prevLike + 1 : prevLike - 1);
  };

  return (<Like onClick={onClick}>{like}</Like>);
};

这样修改后，点击时会先切换click的布尔状态，然后根据新的状态来增减点赞数，而且函数式更新能确保我们拿到的是最新的点赞数，不会出现异步更新导致的逻辑错误～

内容的提问来源于stack exchange，提问作者Daye Kang