从onclick中重新删除元素

Question

当用户从购物车中删除商品时，我会显示带有按钮的商品，将其添加回购物车。这有效。一旦用户将项目添加回购物车，我希望删除显示组件中的项目。这是我的代码供参考。

CART:
class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {differences: [],};
  }

  componentWillReceiveProps(nextProps){
    let thisProps = this.props.cart.items;
    let theNextProps = nextProps.cart.items;
    if (thisProps.map(i => i.sku).some(item => !theNextProps.map(i => i.sku).includes(item))) {
      let diff = [thisProps.filter(item => !theNextProps.includes(item))];
      this.setState({differences: this.state.differences.concat(diff)});
    }
  }
...
  render = () => {
    <CartAddBack data={this.state.differences} onAddToCart={this.props.addToCart} />
    <CheckoutSection className='Checkout-cart-items' titleKey='checkout.items.title'>
      {this.props.cart.items.map((item) => {
        return (
          <CheckoutItem item={item} key={item.sku} onRemoveProduct={this.props.removeFromCart} onUpdateQuantity={this.props.updateCartItem}/>
        );
       })}
    </CheckoutSection>
  }
}

CartAddBack:
class CartAddBack extends Component {
  constructor() {
    super();
    this.state = {deleted: null};
    this.onDelete = this.onDelete.bind(this);
  }

  onDelete(id){
    console.log("THE SKU SHOULD BE HERE", id);
    this.setState(id);
  }

  render() {
    let {data} = this.props;
    let theData = data.map(i => parseInt(i[0].sku));
    let theStated = this.state.deleted;
    return (
      <div>
        {data &&
        <div className="CartAddBack">
          <div className="CartAddBack-Wrapper">
              <ul className="CartAddBack-Item-ul">
                {theStated != null
                  ? theData.filter(i => !theStated.includes(i)) &&
                    <CartAddBackItem data={item[0]} onAddToCart={this.props.onAddToCart} onDelete={this.onDelete}/>
                  : data.map((item) => {
                      return <CartAddBackItem data={item[0]} onAddToCart={this.props.onAddToCart} onDelete={this.onDelete}/>
                  })
                }
              </ul>
          </div>
        </div>
        }
      </div>
    )
  }
}

CartAddBackItem:
class CartAddBackItem extends Component {
  constructor() {
    super();
    this.onClick = this.onClick.bind(this);
  }

  onDelete(){
    this.props.onDelete({deleted: this.props.data.sku})
  }

  allowSubmit() {
    this.setState({
      allowSubmit: true,
    });
  }

  onClick() {
    if (this.props.data) {
      if (this.props.data.quantity <= this.props.data.inventory_quantity) {
        const success = () => {
            this.allowSubmit();
          },
          failure = (err) => {...};
        this.props.onAddToCart({
          ...{sku: this.props.data.sku, quantity: this.props.data.quantity}, quantity: this.props.data.quantity}).then(success, failure);
      }
      else {
        this.setState=({display: false});
        const success = () => {
            this.allowSubmit();
          },
          failure = (err) => {...};

        this.props.onAddToCart({
          ...{sku: this.props.data.sku, quantity: this.props.data.quantity}, quantity: 1}).then(success, failure);
      }
    }
  }

  render() {
    let {data} = this.props;
    return (
      <li className="CartAddBackItem">
        {data &&
        <div className="CartAddBackItem-Wrapper">
          <Button className="CartAddBackItem-button" onClick={this.onClick}><FormattedMessage id="cart.cartAddBack"/></Button>
          <Link to={`product/${data.sku}`} className="CartAddBackItem-Link">
            <p className="CartAddBackItem-title">{data.title}</p>
          </Link>
        </div>
        }
      </li>
    )
  }
}

如果在CartAddBackItem中点击该项目，我希望CartAddBack删除CartAddBackItem。我唯一想到的就是在CartAddBack中制作一个componentWillReceiveProps。但必须有更好的方法。我遇到的问题是我的映射项目到CartAddBackItem。粗看{theStated != Null ? theData.filter(i =>...允许我将商品添加到购物车。如果它只是data.map((item)=>...它可以工作，但我想表明我的想法。有什么建议吗？