为什么 setState() 在我的情况下不能在 React 中工作？

Question

我正在尝试通过使用上下文来实现购物车。上下文工作正常，但我需要创建一种每次点击删除一个产品的方法。为此，我必须使用 useState() 函数。但是，它甚至不会改变状态中的数据。

这是我的函数代码。如果有什么不清楚的地方请告诉我

了解更多信息。 productsToPurchase 是一个包含所有已购买产品的数组，如下所示：

[{itemId: "ps-5", qty:2},{itemId: "iphone-xr", qty:4},{itemId:"ps-4", qty:7}]

export const CartContext = createContext()

class CartContextProvider extends Component {

    state = {
        productsToPurchase: [],
        totalPrice:[]
    }

    addProduct = (itemId, prices) => {
        this.setState(oldState => {
            const objWithIdExist = oldState.productsToPurchase.find((o) => o.itemId === itemId);
            return {
                productsToPurchase: !objWithIdExist
                    ? [...oldState.productsToPurchase, { itemId, qty: 1, price: prices }]
                    : oldState.productsToPurchase.map((o) =>
                        o.itemId !== itemId ? o : { ...o, qty: o.qty + 1 }
                    )
            }
        })

        this.setState(oldState=>{
            return{
                totalPrice: getTotalAmount(oldState.productsToPurchase)
            }
        })
    }

    decreaseProduct = (itemId) =>{

        this.setState(oldState=>{

            // catch the item by mapping
            return oldState.productsToPurchase.map(product=>{
                if (product.itemId === itemId){
                    if (product.qty === 1){
                        //remove the product from the list
                        console.log("qty is 1!")
                    }
                    else {
                        console.log("Quantity is more than 1")
                        return  {...product, qty: product.qty - 1}
                    }
                }
            })

        })

    }

    render() {
        return (
            <CartContext.Provider value={{...this.state, addProduct: this.addProduct, decreaseProduct: this.decreaseProduct}}>
                {this.props.children}
            </CartContext.Provider>
        )
    }
}

function getTotalAmount(productsToPurchase) {

    const totalPrice = []

    productsToPurchase.map((product, productIndex) =>{
        product.price.map((price, priceIndex)=>{
            if (productIndex === 0){
                totalPrice.push({currency: price.currency, amount: price.amount * product.qty})
            }
            else {
                totalPrice.map(total=>{
                    if (total.currency === price.currency){
                        total.amount = total.amount + (price.amount * product.qty)
                    }
                })
            }
        })
    })

    return totalPrice
}

export default CartContextProvider;

Answer 1

如果您想从所选产品数量中减去 1，如果达到 0 则将其删除，试试这个

// Make sure you return the new state object in its entirety
this.setState(({ productsToPurchase, ...oldState }) => ({
  ...oldState,
  productsToPurchase: productsToPurchase.reduce((arr, product) => {
    // is this the selected product?
    if (product.itemId === itemId) {
      // product qty > 1, include it with decrement
      if (product.qty > 1) {
        return [...arr, {
          ...product,
          qty: product.qty - 1
        }]
      }
      return arr // otherwise exclude this product
    }
    // otherwise, just include this product
    return [...arr, product]
  }, [])
}))