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

Question

I have items displayed with check boxes and once clicked/checked they are added to the cart. When unchecked they are added to the cart again. I am not sure how to toggle the checked to remove the item when unchecked.

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]
  });
}

When the item is checked, it displays in the cart with some details. With every click of the checkbox, the item adds to state and shows in the card, regardless if it is checked or unchecked. I need to delete the item from state if the item is unchecked.

Do I check if the item is already there and delete from cart?

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

Any help would be greatly appreciated, thanks!

Answer 1

One way of going about it is to do how you outlined in your question: check if the item already is in the cart. If it is, you can remove it from the cart. It it's not, you can add it to the cart.

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