React Native Hooks添加键值对后如何重置状态至初始值？

问题根源 #

你遇到的确实是对象引用导致的不当突变问题。代码里的originalCart = item.data.cartItems只是做了浅拷贝——数组本身是新的引用，但数组里的每个商品对象还是和item.data.cartItems里的对象共享内存地址。当你在addNote里修改cartItemsCopy[index].seller_notes时，实际是直接修改了原对象的属性，所以originalCart里的对应对象也会同步变化，导致重置功能完全失效。

修复步骤 #

1. 正确初始化originalCart的深拷贝 #

把浅拷贝改成深拷贝，确保originalCart和原数据完全断开引用：

// 适合结构简单的对象（无函数、日期等特殊类型）
const originalCart = JSON.parse(JSON.stringify(item.data.cartItems));

如果商品对象包含JSON无法序列化的类型，改用手动对象拷贝：

const originalCart = item.data.cartItems.map(item => ({...item}));

2. 修改addNote函数，避免直接突变原对象 #

原来的[...cartitems]只拷贝了数组，但里面的对象还是原引用，需要单独拷贝要修改的对象：

const addNote = async(index) =>{
  // 先拷贝数组
  let cartItemsCopy = [...cartitems];
  // 用展开运算符创建新对象，添加seller_notes属性，不修改原引用
  cartItemsCopy[index] = {...cartItemsCopy[index], seller_notes: 'Out of stock'};
  setCartitems(cartItemsCopy);
}

修改后的完整代码 #

export default function PreOrderRequest({route,navigation}) {

 const {item} = route.params
 // 深拷贝原购物车数据，彻底断开引用
 const originalCart = JSON.parse(JSON.stringify(item.data.cartItems))
 const [cartitems, setCartitems] = useState(originalCart)

 const addNote = async(index) =>{
  // 后续可添加await逻辑
  let cartItemsCopy = [...cartitems]
  // 创建新对象，避免修改原引用的对象
  cartItemsCopy[index] = {...cartItemsCopy[index], seller_notes: 'Out of stock'}
  setCartitems(cartItemsCopy)
 }

 const resetChanges = ()=>{
  setCartitems(originalCart)
 }

 console.log({originalCart}) // 现在修改cartitems后，originalCart不会再变化

 return(
   // 你的渲染代码
 )
}

修改完成后，originalCart会一直保持初始状态，调用resetChanges就能正确恢复所有修改前的购物车数据。

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