Javascript 如何想出一个解决方案，改变一个项目的颜色后，它'；它已添加到购物车中？

在我将物品添加到购物车后，尝试更改其颜色时遇到问题。以下是我添加购物车的功能：

function addToCart(newItem) { 
        cartItems.map(item => newItem.type === item.type && removeFromCart(item)) 
        setCartItems(prevItems => [...prevItems, newItem])
    }

function removeFromCart(itemToRemove) { 
    setCartItems(prevItems => prevItems.filter(item => 
       `${item.id}-${item.type}` !== `${itemToRemove.id}-${itemToRemove.type}`)) 
    }

我有一个“选项”组件，其中将显示每个服务：

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>
    )

我很难弄清楚我的问题到底出在哪里

你需要一个解决方案

class Service extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.addToCart = this.addToCart.bind(this);
    this.state = {
      active: false
    };
  }

  addToCart(context) {
    if (context.cartItems.includes(this.props) {
        context.removeFromCart(this.props);
    } else {
        context.addToCart(this.props);
    }

    this.setState({
      active: !this.state.active
    });
  }

  render({ context }) {
    return (
      <>
        <li className={this.state.active ? "notInCart" : "inCart"} onClick={() => this.addToCart(context)}>
          {props.name}
        </li>
      </>
    )
  }
}

类服务扩展组件{
建造师（道具）{
超级（道具）；
//此绑定是使`This`在回调中工作所必需的
this.addToCart=this.addToCart.bind（this）；
此.state={
活动：错误
};
}
addToCart（上下文）{
if（context.cartItems.includes）（this.props）{
context.removeFromCart（this.props）；
}否则{
context.addToCart（this.props）；
}
这是我的国家({
活动：！this.state.active
});
}
呈现（{context}）{
返回(
this.addToCart（context）}>
{props.name}

)
}
}

<>
      <li 
          className={context.cartItems.includes(props) ? "notInCart" : "inCart"}  
          onClick={() => { context.cartItems.includes(props) 
                          ? context.removeFromCart(props) 
                          : context.addToCart(props)}}>
                {props.name}
      </li>
</>

.Options-light {
  @extend .TimeGrid-light;
  ul {
    .inCart {
      background-color: blue;
    }
    .notInCart {
      background-color: red;
    }
  }
}

//as well as

.Options-light {
  @extend .TimeGrid-light;
  .inCart {
    background-color: blue;
  }
  .notInCart {
    background-color: red;
  }
}

class Service extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.addToCart = this.addToCart.bind(this);
    this.state = {
      active: false
    };
  }

  addToCart(context) {
    if (context.cartItems.includes(this.props) {
        context.removeFromCart(this.props);
    } else {
        context.addToCart(this.props);
    }

    this.setState({
      active: !this.state.active
    });
  }

  render({ context }) {
    return (
      <>
        <li className={this.state.active ? "notInCart" : "inCart"} onClick={() => this.addToCart(context)}>
          {props.name}
        </li>
      </>
    )
  }
}