Question

我是新来的反应者，并且正在从事飞行项目。选择项目后，我正在尝试更新购物车。我知道代码的结构可能不是最好的方法，但这是我到目前为止的方法。

Export class DestinationPrices extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flightData: [],
            checked:false,
            data:'',
            cart:[]
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleAddToCart = this.handleAddToCart.bind(this);

    }

 NavCart() {

        return (

            <div className="Nav" >
                <Card body >

          <CardTitle ><h3><b>Flights Selected : </b></h3></CardTitle>
    <CardText >
<span className="fa fa-cart-plus fa-2x"> {this.props.cart.length}</span> 
    </CardText>


                </Card>
            </div>
            )
    }

这是购物车本身，应在选择后更新商品数量。下面是选择方法，您可以选择不同的卡。

Select(FD) {

 this.state={route:''};

       return (
           <div>
               {FD.FlightID}
            <label>

                <Checkbox id={FD.FlightID}
                          name={FD.FlightID}
                          checked={this.setState.route}

                 onChange={(()=> this.handleCheckboxChange(FD.FlightID))}
               handleClick={()=>{this.handleClick(FD.FlightID)}}

                />
                <span>Select</span>
            </label>
           </div>


        )
    }

这些是我必须处理的功能

 handleCheckboxChange =(id) =>{
        var data;
        const selected = (e => e.FlightID = id);
        this.handleAddToCart(id);
    };

    handleAddToCart(flight) {
        const cartItem = this.state.cart.find(x => x.id === flight.id);
        this.setState({cart: [...this.state.cart, flight]})
    }

    handleClick(flight) {
        this.handleAddToCart(flight)
    }

如果有人能够提供帮助，将不胜感激。

Answer 1

handleAddToCart(flight) {
        const cartItem = this.state.cart.find(x => x.id === flight.id);
        this.setState({cart: [...this.state.cart, flight]})
    }

this.state = {
        flightData: [],
        checked:false,
        data:'',
        cart:[]
    };

最初，您将购物车：[]设为空集。但是在handleAddToCart方法中，您试图在此空集中查找某些内容。如果未返回值，则函数返回未定义。

那你应该做什么：

在状态下创建一个flights对象。（我不确定[[]用于什么flightData）

state={flights:allFlights} //Pass all your flights data from the source properly.

由于要在单击按钮时将广告投放添加到购物车，因此您应将该广告投放的“ id”作为参数传递给onClick函数。

将此示例应用于您的应用

<button className="cart-btn badge-primary"
                    onClick={() => {this.props.addToCart(id);}}>addToCart</button>

现在，单击按钮时，您会将ID传递给addToCart方法。接下来，您必须在“ flights：allFlights”对象中找到具有给定ID的航班。

const cartItem = this.state.flights.find(x => x.id === flight.id);
this.setState({cart: [...this.state.cart, cartItem]})

现在，您正在更新状态中的购物车对象。

由于您是新手，所以我不得不提及2种永远不会忘记的事情： 1-当您在数组中查找项目时，如果要修改该项目，则不能使用find方法。相反，您应该将“飞行”分配给另一个对象，在新数组中找到该项目的索引，然后对其进行修改。对于许多人来说，这是一个令人头疼的大反应。 2-this.setState({cart: [...this.state.cart, flight]})这不是正确的方法。 this.setState（（）=> {返回{购物车：[... this.state.cart，cartItem]}）

选择项目时反应更新购物车

1 个答案: