反应，有条件的 setState 点击一个按钮

Question

所以，我根本不知道我希望它如何工作，但在我的脑海中，我认为它可以我似乎无法让它工作..

基本上我有一个空的对象数组：

this.state = {
     orders: [{}]
}

然后当我点击一个按钮时，我想添加一个订单（自定义事件，因为购物车与点击的按钮没有父子关系，原因）：

pubSub.on("addToCart", (data) =>
   this.setState((prevState => ({
      orders: [...prevState.orders, data.order]
   })
);

这行得通。我最终得到：

orders: [
 {[sku]: sku, quantity: quantity}
]

现在我遇到的问题是，如果要添加一个带有数组中已经存在的 SKU 的订单，我只想更新数量。 如果在数组中没有找到 SKU，我想添加一个新订单。 所以我想检查数组中是否存在key（key SKU与key SKU的值相同）。

所以，要检查一个数组是否存在我会使用的键：

this.state.orders.map(obj =>{
  if (!(data.sku in obj)){
    **setState here with order added**
  }
})

我知道条件应该是什么样子，如果它发现密钥存在，然后只更新数量。

我面临的问题是它遍历数组中的所有订单，并且每次key不存在时，它都会添加一个新订单。 我怎么能做到这一点，所以它检查是否存在密钥，如果是这种情况，只添加新订单 1 次，而不是每次都添加？ 我实际上想先检查所有的键，然后再决定要做什么。 使用这种方法，我必须决定每一轮地图应该做什么。

另外请记住，我们处于自定义事件处理程序的范围内，我想在其中使用 data。 在这个处理程序中，我不能在 map 函数范围之外分配变量。所以基本上它是或者我只使用 setState，或者我使用 map 函数并在里面设置 setState。我不能同时使用它们，因为数据仅在第一个方法调用中可用。 这也是我第一次尝试使用这个自定义事件处理程序的东西，范围界定有点束缚我的手。

如果这是有道理的，并且有人可以指出我正确的方向，那将不胜感激。 提前致谢！

Answer 1

您可以在setState 中传递函数。此函数将具有当前状态，如果您使用类，则将具有当前道具。在此函数中，您创建 state change - 您要更新的状态对象的一部分。在您的情况下，它可能看起来像这样（它是准系统和肮脏的，以展示您如何做到这一点）：

// data is here, somwhere
this.setState(function(state, props) {
  let index = state.orders.findIndex(obj => data.sku in obj);
  if (index > -1) {
    // update existing
    return {orders: state.orders.slice(0, index).concat(
      {...state.orders[index], quantity: state.orders[index].quantitiy + 1},
      state.orders.slice(index+1))}
  } else {
    // create new
    return {orders: state.orders.concat(data)}
  }
})