Javascript 如何塑造个人风格<；李>；相对于所有<；李>；你有什么反应？

我在更改一个电子商务项目中添加到购物车中的项目的颜色时遇到一些问题。我可以这样做，当项目被点击时，类发生变化，项目得到一个颜色。作为一种副作用，所有随附的物品也都有颜色

“服务”组件

const Service = (props) => {

    const context = useContext(ThemeContext)

    return (
        <>
            <li className={context.cartItems.some(item => item.type === "service") ? "inCart" : ""}
                onClick={() => { context.cartItems.some(item => item) ?
                    context.removeFromCart(props) : context.addToCart(props)}} >
                {props.name}
            </li>
        </>
    )
}

const Options = () => {

    const context = useContext(ThemeContext)

    const serviceElements = servicesList.map(service => 
        <Service key={service.id} id={service.id} name={service.name} type={service.type} /> )

    return (
        <div className={`Options-${context.theme}`}>
            <ul>
                {serviceElements}
            </ul>
        </div>
    )
}

Scss

---

您的SCS没有右括号？应该是：

.Options-light {
  .inCart {
    background-color: blue;
  }
}

---

看起来有些事情可以改变。首先，您的

服务中的
类名
逻辑将向所有
li
添加
化身
，因为它独立于当前道具检查整个上下文数组。因此，请尝试：

context.cartItems.find（item=>item.id==props.id）？“化身”：“

还可以清理您的内容功能：

函数addToCart（newItem）{
//看起来您正在尝试进行检查，以确保该项目不存在
//已经在购物车里了
const alreadyInCart=cartimes.some（item=>item.id==newItem.id）；
如果（！alreadyInCart）{
setCartItems（PreviItems=>[…PreviItems，newItem]）；
}
}
功能removeFromCart（itemToRemove）{
//我假设id是唯一的，因为您使用它作为服务组件的密钥
setCartItems（prevItems=>prevItems.filter（item=>item.id！==itemToRemove.id））；
}

我认为您最好使用
切换CartItem
使事情更干净，如果您以后的“Cart”服务只需要一个id，那么您可以进一步清理。如果效果更好，请告诉我：

const选项=（）=>{
const context=useContext（ThemeSecontext）；
const servicelements=servicesList.map（服务=>
service.id==id）}
/>
);
返回(

{serviceElements}

)
}
常量服务=（道具）=>{
const context=useContext（ThemeSecontext）；
返回(
toggleCartItem（props.id）}
>
{props.name}

)
}
函数toggleCartItem（newItemId）{
const alreadyInCart=cartItems.some（id=>id==newItemId）；
如果（alreadyInCart）{
setCartItems（prevIds=>prevId.filter（id=>id！==newItemId））；
}否则{
setCartItems（prevIds=>[…prevIds，newItemId]）；
}
}
在您的
服务
组件中，您使用的是
上下文.cartItems。一些
用于确定是否应将“incontat”用作
类名
这就是问题所在，因为如果购物车中有任何物品，
some（）
将为
true
。这意味着每个
要么没有
类名，要么全部使用“invot”

您真正想要的是当前项目是否在购物车中，因此我建议进行以下更改：

const Service = (props) => {
  const context = useContext(ThemeContext);
  const inCart = context.cartItems.find(item => item.id === props.id);
  return (
    <>
      <li className={inCart ? "inCart" : ""} 
        onClick={() => { 
          inCart ? 
            context.removeFromCart(props) : 
            context.addToCart(props)
         }} > {props.name}
      </li>
    </>
  )
}

const服务=（道具）=>{
const context=useContext（ThemeSecontext）；
const einvot=context.cartimes.find（item=>item.id==props.id）；
返回(
{
化身？
context.removeFromCart（道具）：
context.addToCart（道具）
}}>{props.name}

)
}

这将仅在单击该选项时设置
，您能看到该类被添加到li吗？是。如果我单击其中一个
，它们都会得到类“envot”。您确定要
context.cartItems.some
，但不是
context.cartItems.find
？我尝试了这两种方法，它们给出的结果相同。程序需要知道购物车中是否有某种类型的商品——这就是我在那里尝试做的。看起来
服务
组件中的逻辑不是您想要的
.Options-light {
  .inCart {
    background-color: blue;
  }
}

const Service = (props) => {
  const context = useContext(ThemeContext);
  const inCart = context.cartItems.find(item => item.id === props.id);
  return (
    <>
      <li className={inCart ? "inCart" : ""} 
        onClick={() => { 
          inCart ? 
            context.removeFromCart(props) : 
            context.addToCart(props)
         }} > {props.name}
      </li>
    </>
  )
}