React中如何更新useState对象数组而非添加新数组元素

问题场景 #

我有一个如下的useState对象，其中qnty是计数器变量，每次计数器更新时data对象会同步更新，每次data更新都会调用updateCart函数来更新Context中的购物车状态：

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

Context的初始状态定义如下：

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

当前的updateCart函数会直接向cart数组中添加新元素：

updateCart = (newItem) => {
  this.setState({
    cart: [newItem, ...this.state.cart],
  });
};

但我需要的是：如果购物车中已存在相同dish的商品，就更新该商品的qnty值；如果不存在，再添加新商品。比如购物车已有qnty=1的某商品，当qnty改为2时，应该更新原有商品的数量，而不是新增一条。

我尝试修改了updateCart函数，但没有达到预期效果：

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.state.cart[indx].qnty = newItem.qnty;
    } else {
      this.setState({
        cart: [newItem, ...this.state.cart],
      });
    }
};

问题分析 #

你直接修改了this.state.cart中的元素，这违反了React的状态更新规则——不能直接修改原状态对象，必须通过setState生成新的状态值，否则React无法检测到状态变化，不会触发组件重新渲染。

正确实现方案 #

修改updateCart函数，始终通过setState更新状态，同时处理“更新已有商品”和“新增商品”两种情况：

updateCart = (newItem) => {
  // 排除空dish的情况，避免处理初始占位项
  if (!newItem.dish) return;

  this.setState(prevState => {
    // 检查商品是否已存在
    const existingItemIndex = prevState.cart.findIndex(
      item => item.dish === newItem.dish && item.dish !== ""
    );

    if (existingItemIndex !== -1) {
      // 存在则创建新数组，更新对应商品的qnty
      const updatedCart = [...prevState.cart];
      updatedCart[existingItemIndex] = {
        ...updatedCart[existingItemIndex],
        qnty: newItem.qnty
      };
      return { cart: updatedCart };
    } else {
      // 不存在则添加新商品
      return { cart: [newItem, ...prevState.cart] };
    }
  });
};

关键说明 #

1. 使用setState的函数式更新（接收prevState参数）：确保获取到最新的状态值，避免状态更新依赖旧值导致的问题。
2. 不直接修改原数组：通过扩展运算符...创建新数组和新对象，保证状态的不可变性。
3. 先判断newItem.dish是否为空：避免将初始空占位项添加到购物车中。

内容的提问来源于stack exchange，提问作者Kaustubh Paturi