javascript - 如何从 React 中的购物车状态中删除未选中的项目

Question

我的项目显示有复选框，一旦点击/选中它们就会被添加到购物车。取消选中时，它们会再次添加到购物车。我不确定如何在未选中时切换选中以删除项目。

export class DestinationPrices extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flightData: [],
      isChecked: props.isChecked || false,

      data: "",
      cart: []
    };

    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  // ...
}

Select(FD) {
  return (
    <div>
      {FD.FlightID}
      <label>
        <Checkbox
          id={FD.FlightID}
          name={FD.FlightID}
          value={this.state.isChecked}
          onChange={() => this.handleCheckboxChange(FD)}
        />
        <span>Select</span>
      </label>
    </div>
  );
}

handleCheckboxChange = id => {
  const cartItem = this.state.cart.filter(x => x.FlightID === id.FlightID);

  this.setState({
    isChecked: !this.state.isChecked,
    cart: [...this.state.cart, id]
  });
}

选中该项目后，它会显示在购物车中，并包含一些详细信息。 每次单击复选框时，项目都会添加到状态并显示在卡片中，无论它是选中还是未选中。如果未选中该项目，我需要从状态中删除该项目。

我是否检查商品是否已经存在并从购物车中删除？

render() {
  var data = this.props.cart;

  var arry = [];
  arry.push(data);

  return (
    <div>
      <Card body>
        <CardTitle>
          <h3>
            <b>Flights Selected : </b>
          </h3>
        </CardTitle>

        <CardText>
          <span className="fa fa-cart-plus fa-2x"> {data.length} </span>{" "}
          {this.getData()}
        </CardText>

        <div />
      </Card>
    </div>
  );
}

非常感谢任何帮助，谢谢!

Answer 1

解决此问题的一种方法是按照您在问题中概述的方式进行操作:检查商品是否已在购物车中。如果是，您可以将其从购物车中移除。不是，您可以将其添加到购物车。

handleCheckboxChange = item => {
  this.setState(prevState => {
    const isItemInCart = prevState.cart.some(el => el.FlightID === item.FlightID);
    const cart = isItemInCart
      ? prevState.cart.filter(el => el.FlightID !== item.FlightID)
      : [...prevState.cart, item];

    return { cart };
  });
}