React 如何根据父函数更改子状态

Question

我正在构建 React 项目（杂志）以用于学习目的。我被困在购物车里的柜台上。每个产品项目都有它的数量。每次我点击添加到购物车按钮时，它都会增加 1。当我点击关闭按钮时，项目消失但它的数量被保存，虽然我希望它设置为 0。所以下次我点击加入购物车，数量又从0开始了。 听起来很容易，但我卡住了。似乎我已经尝试了几乎所有我不知道如何解决这个问题的方法。

这里是主要组件：

`class App extends React.Component {
      constructor() {
        super();
        this.handleAddToCart = this.handleAddToCart.bind(this);
        this.itemRemove = this.itemRemove.bind(this);
        this.state = {
          products: {products: []},
          cart: [],
          quantity: 0,
          itemQ: 0,
        };
      }

    handleAddToCart(selectedProducts) {
    let cartItems = this.state.cart;
    let productID = selectedProducts.id;
    let productQty = selectedProducts.quantity;

    if(this.checkProduct(productID)) {
      let index = cartItems.findIndex(x => x.id == productID);
      cartItems[index].quantity = productQty;
      this.setState({
        cart: cartItems,
      });
    } else {
      cartItems.push(selectedProducts);
    }
    this.setState({
      cart: cartItems,
    });
  };



itemRemove(id, amount, e) {
    let cart = this.state.cart;
    let test = amount;
    let index = cart.findIndex(x => x.id == id);
    let productQty = amount;
    cart[index].quantity = Number(productQty);
    cart.splice(index, 1);
    this.setState({
      cart: cart,
      itemQuantity: 0,
      itemQty: 0
    });
    e.preventDefault();
  };

checkProduct(productID) {
    let cart = this.state.cart;
    return cart.some(function(item) {
      return item.id === productID;
    });
  }

render() {
    return(
      <div className="main">
        <Products
          addToCart={this.handleAddToCart} 
          productsList={this.state.products}
          itemQuantity={this.state.itemQuantity}
        />
        <Cart 
          cartItems={this.state.cart}
          itemRemove={this.itemRemove}
          quantity={this.state.itemQuantity}
        />
      </div>
    );
  }
}

购物车组件（我在购物车中添加和删除商品）：

render() {
        let cartItems;
        cartItems = this.state.cart.map(product => {
            return(

            <CSSTransition key={product.id} classNames={'fade'} timeout={{enter:500, exit: 300}}>       
                <div className="product-item-wrapper">
                    <div className="product-item">
                        <div 
                            className="item-remove"
                            onClick={this.props.itemRemove.bind(this, product.id, product.quantity)}
                        >
                        </div>
                        <div className="item-img">
                            {product.thumb}
                        </div>
                        <div className="item-info">
                            <p className="item-name">{product.title}</p>
                            <p className="item-desc">{product.style}</p>
                            <p className="item-quantity">Quantity: {product.quantity}</p>
                        </div>
                        <div className="price">
                            <p>$ {product.price}</p>
                        </div>

产品组件（我通过单击“添加到购物车”按钮将商品添加到购物车：

class Product extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedProduct: {},
            isAdded: false,
            itemQuantity: 0
        };
    }

addToCart(style, title, price, id, thumb, quantity) {
        this.setState(
            {
                selectedProduct: {
                    style: style,
                    title: title,
                    price: price,
                    id: id,
                    thumb: thumb,
                    quantity: quantity
                },
            },
            function() {
                this.props.addToCart(this.state.selectedProduct);
            }
        );
        this.setState(
            {
            isAdded: true,
            itemQuantity: this.state.itemQuantity + 1,
            },
        );
    }

render() {

        const {id, title, style, price, currency, installments} = this.props;
        const quantity = this.state.itemQuantity;


        return(
            <div className="product">

                <div 
                    className="buy-btn"
                    onClick={this.addToCart.bind(
                        this,
                        style,
                        title,
                        price,
                        id,
                        thumb,
                        quantity
                    )}
                >
                    Add to cart
                </div>
            </div>
        );
    }

我尝试了很多东西。当我删除项目，然后再次将其添加到购物车时，其数量未设置为 0。很明显为什么......因为它取决于状态值（位于 Product 组件中）。因此，每次从购物车中删除商品时，我都必须将此状态设置为 0。简单......但为了做到这一点，我必须通过回调函数将它传递给父组件。然后更改此数量并再次将其传递给 Product 组件。但是当我这样做时，购物车项目与产品具有相同的柜台，而不是独立于每个产品。我很困惑，卡住了，不知道该怎么办。希望大家帮忙

Answer 1

对此有两种解决方案，最快的方法是在父组件中创建一个更改相关状态的函数。然后，您将能够通过构造函数将该函数注入到子组件中。然后在需要更改父状态时只需调用注入的函数！

第二个但更好的是使用Redux

ReactJS modify parent state from child component 的可能重复项？

Answer 2

所以我这样解决了我的问题： 起初我摆脱了 Product 组件中的所有状态，因为它们在我的情况下没有用。在 Product 组件中，我只从 props 调用 AddToCart 函数。

this.props.addToCart({ 
style: style, 
title: title, 
price: price, 
id: id, 
thumb: thumb 
});

我从这个函数中删除了 quantity 变量作为参数，因为父组件（App）中的状态就足够了。在应用程序中，我更改了 handleAddToCart 和 itemRemove 函数：

handleAddToCart(selectedProduct) { 
let cartItems = this.state.cart; 
let productID = selectedProduct.id; 
if(this.checkProduct(productID)) { 
let index = cartItems.findIndex(x => x.id == productID); 
cartItems[index].quantity += 1; 
this.setState({ 
cart: cartItems, 
}); 
} else { 
selectedProduct.quantity = 0; 
cartItems.push(selectedProduct); 
} 
this.setState({ 
cart: cartItems, 
}); 
};

在 itemRemove 中我只改了一行：cart[index].quantity = 0;