React修改数组内对象后未触发HTML视图更新问题求助

问题原因 #

React的状态更新基于浅比较判断是否需要触发重渲染，你当前的写法直接复用了原状态数组的引用，没有创建新的数组副本，React识别不到状态变更，因此不会刷新页面：

• let tempList = products只是将原状态数组的内存地址赋值给了新变量，二者本质指向同一个数组
• 直接修改数组内对象属性的操作属于直接变更原状态，不符合React不可变状态的更新规范

修复代码 #

修改incrementAmount函数，创建新的数组和修改对象的副本即可：

const incrementAmount = (targetProduct) => {
  // 用map遍历生成全新数组
  const newProducts = products.map(product => {
    if (product.id === targetProduct.id) {
      // 匹配到目标商品时，返回新的对象副本，更新数量
      return {
        ...product,
        amount: product.amount + 1
      }
    }
    // 非目标商品直接返回原对象
    return product
  })
  setProducts(newProducts)
  // 如果需要同步到本地存储，这里加一行 saveCart(newProducts) 即可
}

其他优化建议 #

你当前的列表渲染没有给遍历项加唯一key属性，可能会触发控制台警告，也会影响React的diff效率，补充即可：

{products.map((product) => {
  return (
    <div className="cart-detail" key={product.id}>
      {/* 原有内容不变 */}
    </div>
  )
})}

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