Javascript 使用React钩子单击按钮时切换图标颜色

我是个反应新手。我正在尝试在单击按钮时将like或书签计数更新为

0

和

1

。当我点击书签图标时，两个图标都会切换。这种行为似乎前后不一致

切换图标组件

const ToggleIcon = ({ icon, color, styledIcon, handleClick }: any) => {
  return (
    <IonIcon icon={color ? styledIcon : icon} onClick={handleClick}></IonIcon>
  );
};

  {config.map((props, index) => (
    <ToggleIcon
      style={{ padding: "10px" }}
      handleClick={() => {
        setColor(!color);

        if (props.type === "bookmark") {
           !color && props.type === "bookmark"
           ? setBookmarkCount(bookmarkCount + 1)
           : setBookmarkCount(bookmarkCount - 1);
        }

        if (props.type === "like") {
            !color && props.type === "like"
            ? setLikeCount(likeCount + 1)
            : setLikeCount(likeCount - 1);
        }
      }}
      color={color}
      {...props}
     />
  ))}

const-ToggleIcon=（{icon，color，styledIcon，handleClick}:any）=>{
返回(
);
};

根组件

const ToggleIcon = ({ icon, color, styledIcon, handleClick }: any) => {
  return (
    <IonIcon icon={color ? styledIcon : icon} onClick={handleClick}></IonIcon>
  );
};

  {config.map((props, index) => (
    <ToggleIcon
      style={{ padding: "10px" }}
      handleClick={() => {
        setColor(!color);

        if (props.type === "bookmark") {
           !color && props.type === "bookmark"
           ? setBookmarkCount(bookmarkCount + 1)
           : setBookmarkCount(bookmarkCount - 1);
        }

        if (props.type === "like") {
            !color && props.type === "like"
            ? setLikeCount(likeCount + 1)
            : setLikeCount(likeCount - 1);
        }
      }}
      color={color}
      {...props}
     />
  ))}

{config.map（（道具，索引）=>(
{
setColor（！color）；
如果（props.type==“书签”）{
！color&&props.type==“书签”
？设置书签计数（书签计数+1）
：setBookmarkCount（bookmarkCount-1）；
}
如果（props.type==“like”）{
！color&&props.type==“like”
？设置likeCount（likeCount+1）
：setLikeCount（likeCount-1）；
}
}}
颜色={color}
{…道具}
/>
))}

我使用创建了一个工作示例。有人能帮忙吗？

解决方案：

---

您需要将颜色分为两种不同的状态。按照您编写的方式，一个布尔值驱动第27行上书签和图标颜色的颜色。仅仅因为在第51行有一个循环，并不能改变只有一个setColor函数的事实，这两个函数最终都使用了两次，问题的根本原因是使用单一的

颜色

状态来切换图标颜色。无论何时单击任何图标，它都会触发颜色状态的更改，从而使用该

颜色

状态重新渲染整个组件

---

我试着对

如颜色

和

书籍颜色

使用多种状态，效果非常好。

我想现在你的反应更好了。只是为可能需要此解决方案的其他人指出。handleClick中的条件语句有点混乱

if（props.type==“书签”）{
！color&&props.type==“书签”
？设置书签计数（书签计数+1）
：setBookmarkCount（bookmarkCount-1）；
}
如果（props.type==“like”）{
！color&&props.type==“like”
？设置likeCount（likeCount+1）
：setLikeCount（likeCount-1）；
}
}}
颜色={color}
{…props}

如果您将自己限制为仅使用两个静态值（如/bookmark），我不太明白配置数组的意义，这似乎是在让事情变得更加困难。如果您想继续使用配置，并且能够指定任意数量的图标，您可能需要更多类似的内容：为了让这一点稍微清楚一点，您遇到的问题是，您无法仅从一个布尔值（the

color={color}

）确定要为哪个图标上色，使用原始状态，您需要有一个函数来检查

color

是否为真，以及相应的计数是否大于0（此时您并不真正需要color标志）。