试图操纵反应中的状态阵列

Question

我需要编写两个功能，一个功能用于更新购物车，并使用新产品（储备金），另一种用于从购物车中删除产品。 我有很多产品供应商，所以我想将“购物车”阵列分为这样的部分：

{
  "supplier1": ["product0": {props}, "product1": {props}, "productN": {props}],
  "supplier2": ["product0": {props}, "product1": {props}, "productN": {props}],
  "supplierN": ["product0": {props}, "product1": {props}, "productN": {props}],
}

我可以成功地将供应商添加到我的州阵列中，并将产品推向供应商的阵列。
当我使用

setCart(cart)

购物车阵列正在更新时，但这仍然是旧数组，因此React不会将我的组件恢复

，在这种情况下，

setCart([...cart])

CART数组只会变为空的
因此，这是添加新产品

const [cart, setCart] = useState([])
const addToCart = useCallback((options) => {
  //options.cart_section and options.reserve
  if(typeof cart[options.cart_section] === 'undefined'){
    cart[options.cart_section] = []
  }
  cart[options.cart_section].push(options.reserve)
  setCart([...cart])
}, [])

和删除产品的守则

const removeFromCart = useCallback((options) => {
  let index = cart[options.cart_section].indexOf(options.reserve) - 1
  cart[options.cart_section].splice(index,1)
  setCart([...cart])
})

的代码，它可以删除指定的产品，但React不会恢复组件（与下面的功能相同）

对不起，我的英语，感谢您的帮助

Answer 1

• 拳头。您无法像数组一样分配键值。但
  您可以将对象作为数组的项目推。每个对象被认为是一个
  独特的供应商。因此，您的数组应该是这样的：

[
  {
    supplierName: 'supplie name 1',
    products: [
     {name: 'product name 1'}, 
     {name: 'product name 2'}
    ]
  },
  {
    supplierName: 'supplie name 2',
    products: [
     {name: 'product name 1'}, 
    {name: 'product name 2'}]
  }
]

• 第二点。 永远不要突变状态。 您正在通过将一些东西推入其中来突变购物车。这样，React不会通过SETSTATE 更新状态，因此不会填充您的组件。您必须通过这种方式从状态创建功能中的变量：

  let tempCart = cart.map(object => ({...object}))

之后，您可以推动新的供应商或产品，最后您应该通过setcart更新状态。这样：

  setCart(tempCart)

这样，您正在通过SetState更新状态，React将把此操作视为（需要DOM需要更新），那么您的组件将获得Rerender