React useState修改变量但不触发组件重渲染问题求助

我正在开发一个购物车功能，购物车是独立组件，每个商品也是独立组件。商品组件包含1-5的数量选择下拉框和移除按钮，移除功能正常，但数量调整后页面不更新，控制台却显示状态已修改。

移除功能代码（正常工作）：

function removeItem(id) {
  const newCart = cart.filter((item) => item.id !== id)
  setCart(newCart);
}

数量调整代码（页面不更新，但console.log显示值已变）：

function changeQuantity(event, id) {
  let newCart = cart;
  for (let i=0; i<cart.length; i++) {
    if (cart[i].id === id) {
      newCart[i].quantity = parseInt(event.target.value); // update quantity
      newCart[i].name = "CHANGED"; // debugging purposes, to know if it was changed
    }
  }
  setCart(newCart); // this doesn't seem to change the cart visually
  console.log(cart); // but in the console I can see the changes being made
}

补充：保存代码触发页面重新渲染后，所有更新都会正常显示。

问题根源 #

React的状态更新依赖不可变值判断是否需要重新渲染。你这里let newCart = cart只是把原数组的引用赋值给了新变量，修改newCart里的元素时，本质上是直接修改了原cart数组的内容。调用setCart(newCart)时，因为新数组和原数组是同一个引用，React会认为状态没有变化，所以不会触发组件重新渲染。

而移除功能正常，是因为filter方法返回的是一个全新的数组，引用和原数组不同，React能检测到状态变化并触发渲染。

修复方法 #

需要创建原数组的副本，修改副本后再传给setCart，保证状态是一个新的引用。有几种常见实现方式：

方式1：使用展开运算符创建数组副本，再修改对应项

function changeQuantity(event, id) {
  const newQuantity = parseInt(event.target.value);
  // 创建原数组的浅拷贝
  const newCart = [...cart];
  // 找到对应商品并修改
  const itemIndex = newCart.findIndex(item => item.id === id);
  if (itemIndex !== -1) {
    // 创建商品对象的副本，保持不可变性
    newCart[itemIndex] = {
      ...newCart[itemIndex],
      quantity: newQuantity,
      name: "CHANGED"
    };
  }
  setCart(newCart);
}

方式2：使用map方法生成新数组

function changeQuantity(event, id) {
  const newQuantity = parseInt(event.target.value);
  const newCart = cart.map(item => {
    if (item.id === id) {
      // 返回修改后的新对象，不修改原对象
      return {
        ...item,
        quantity: newQuantity,
        name: "CHANGED"
      };
    }
    // 其他商品直接返回原对象
    return item;
  });
  setCart(newCart);
}

关键注意点 #

• 永远不要直接修改React状态中的数组或对象，必须通过创建副本的方式更新，保证状态的不可变性。
• 浅拷贝（如[...cart]或Object.assign）在对象层级不深时足够使用，如果是嵌套对象，需要使用深拷贝（但购物车场景一般浅拷贝即可）。

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