React useState布尔切换状态追加而非替换问题如何解决

• 未点赞状态的红色图标无任何条件渲染逻辑，无论thumb状态是true还是false都会固定显示
• 只有已点赞状态的绿色图标做了thumb为真时才显示的判断，因此点击切换状态后就会出现两个图标并存的问题

直接通过三元表达式给同一个图标绑定不同样式即可，无需声明两个图标组件，修改后的Liker组件代码如下：

const Liker = () => {
  const [thumb, setThumbUp] = useState(false);

  return (
    <>
      <button style={{border: 'none', backgroundColor: 'transparent'}} onClick={() => setThumbUp(!thumb)}>
        <ThumbUpIcon style={thumb ? ThumbUpButton : ThumbStyle} />
      </button>
    </>
  );
}

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