React中取消点赞时图标延迟显示，如何修改三元运算符实现状态立即响应？

你遇到的延迟问题核心出在三元运算的判断逻辑上：
你当前用的liked || like2是或判断，只要liked为真，不管like2的值是什么，整个表达式的结果都为真。而liked大概率是后端接口返回的初始点赞状态，你执行取消点赞操作时，虽然本地立即执行了setLike2(false)，但只要后端接口还没返回、liked的值还没更新为假，三元判断的结果就一直为真，自然不会切换到未点赞的图标，你感知到的0.5秒就是接口请求的耗时。

调整判断逻辑，优先使用本地操作的like2状态，只有用户还没有进行任何点赞/取消点赞操作时，才使用后端返回的liked状态：

1. 首先给like2设置初始值为null，代表用户未进行操作
2. 修改三元判断的条件，替换原来的liked || like2

修改后的代码如下：

// like2的初始值设为null
const [like2, setLike2] = useState(null);

const onLike = () => {
  setLike2(true);
  // 此处正常调用点赞接口即可，不需要等接口返回再更新状态
};
const onUnlike = () => {
  setLike2(false);
  // 此处正常调用取消点赞接口即可，不需要等接口返回再更新状态
};

// 优先取本地操作的like2，未操作时用后端返回的liked
const isLiked = like2 === null ? liked : like2;

{isLiked ? (
  <LikeContainer>
    <MenuContainer onPress={onUnlike}>
      <IconButtonU
        iconName="unlike"
        style={{width: 23, height: 23}}
        source={require('../../Assets/Images/Tabs/heart.png')}
      />
    </MenuContainer>
  </LikeContainer>
) : (
  <LikeContainer>
    <MenuContainer onPress={onLike}>
      <IconButtonU
        iconName="like"
        source={require('../../Assets/Images/Tabs/ic_favorite_outline.png')}
      />
    </MenuContainer>
  </LikeContainer>
)}

如果你确实需要like2为true时显示iconName="like"，只需要把三元判断的两个分支调换即可，或者把条件改成!isLiked。

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