如何更新 React useState 对象数组，而不是添加新的数组元素

在 React 应用中，使用 useState 管理状态是很常见的做法。当涉及到对象数组时，例如购物车数据，我们需要谨慎处理更新逻辑，以避免不必要的性能问题和数据错误。 假设你有一个购物车状态，其结构如下：

const [data, setData] = useState({
  dish: "",
  category: "",
  cost: 0,
  qnty: 0,
  img: "",
});

state = {
  updateCart: this.updateCart,
  cart: [
    {
      dish: "",
      category: "",
      cost: 0,
      qnty: 0,
      img: "",
    },
  ],
};

每次商品数量 (qnty) 发生变化时，你希望更新购物车 (cart) 数组中对应商品的数量，而不是简单地向数组中添加一个新的商品对象。以下是如何实现这一目标的步骤：

1. 理解问题

问题的核心在于，每次调用 updateCart 函数时，你都在向 cart 数组中添加一个新的商品对象，即使该商品已经存在于购物车中。你需要修改 updateCart 函数，使其能够识别购物车中已存在的商品，并更新其数量，而不是添加新的商品。

2. 修改 updateCart 函数

以下是修改后的 updateCart 函数：

新CG儿

数字视觉分享平台 | AE模板_视频素材

147

查看详情

updateCart = (newItem) => {
  if (
    this.state.cart.filter(
      (element) => element.dish === newItem.dish && element.dish !== ""
    ).length > 0
  ) {
    const indx = this.state.cart.findIndex(
      (element) => element.dish === newItem.dish
    );
    this.setState(() => {
      this.state.cart[indx].qnty = newItem.qnty;
    });
  } else {
    this.setState({
      cart: [...this.state.cart, newItem],
    });
  }
};

3. 代码解释

• 检查商品是否存在： 首先，使用 filter 方法检查 cart 数组中是否已经存在与 newItem 具有相同 dish 属性的商品。
• 如果存在，更新数量： 如果商品已经存在，使用 findIndex 方法找到该商品在数组中的索引 indx。然后，使用 this.setState 更新 cart 数组中该商品的 qnty 属性为 newItem.qnty。注意，这里使用 this.setState 的函数式更新形式，确保正确更新状态。
• 如果不存在，添加商品： 如果商品不存在，使用 this.setState 将 newItem 添加到 cart 数组中。

4. 注意事项

• 不可变性： 在 React 中，状态的更新应该是不可变的。虽然上面的代码直接修改了 this.state.cart[indx].qnty，但是通过 this.setState 触发了重新渲染，因此在功能上是可行的。更严格的做法是创建一个新的 cart 数组，并将更新后的商品对象替换到新的数组中。
• 性能优化： 对于大型购物车，频繁地使用 filter 和 findIndex 方法可能会影响性能。可以考虑使用 Map 数据结构来存储购物车数据，以提高查找效率。
• 错误处理： 在实际应用中，应该添加错误处理机制，例如检查 newItem 是否有效，以及处理 findIndex 方法返回 -1 的情况。

5. 总结

通过修改 updateCart 函数，我们可以有效地更新 React useState 对象数组中的元素，而不是每次都添加新的元素。这种方法可以避免购物车中出现重复商品，并提高用户体验。记住，在处理 React 状态时，始终要遵循不可变性原则，并考虑性能优化和错误处理。

以上就是如何更新 React useState 对象数组，而不是添加新的数组元素的详细内容，更多请关注php中文网其它相关文章！