React中更新advertisersPriorities时oldPriorities同步变化问题求助

核心原因：引用类型浅拷贝导致的状态污染 #

你遇到的问题本质是JavaScript引用类型的浅拷贝特性引发的：

• 在getPriorities函数中，你用[...newPrioritesList]创建新数组更新状态，但这种方式仅拷贝了数组的外层结构，数组内的每个对象元素依然和原newPrioritesList里的对象共享同一个内存引用。这就导致oldPriorities和advertisersPriorities两个状态里的对象其实是同一个实体。
• 在setAdvertiserPriority里，let newWeights = advertisersPriorities并没有创建新数组，只是把原状态的引用赋值给了变量。后续修改newWeights[index].priority时，实际上是直接修改了原状态数组里的对象（因为引用指向同一块内存）。而oldPriorities里的对象和它是同一个引用，所以即便没调用setOldPriorities，oldPriorities也会跟着变化。

解决方案 #

1. 初始状态更新时做深拷贝

更新oldPriorities和advertisersPriorities时，要确保数组里的每个对象都是独立的副本：

async function getPriorities(store: StoreRecord){
    const prioritiesData =  await getData("stores/"+ store.id + "/priorities")
    // ... 处理数据得到newPrioritesList
    // 对数组内的每个对象做浅拷贝（适用于无嵌套结构的对象）
    setAdvertisersPriorities(newPrioritesList.map(item => ({...item})))
    setOldPriorities(newPrioritesList.map(item => ({...item})))
}

如果对象存在嵌套结构，需要用更彻底的深拷贝方式：

// 使用JSON序列化实现深拷贝（注意：无法拷贝函数、Symbol等特殊类型）
setAdvertisersPriorities(JSON.parse(JSON.stringify(newPrioritesList)))
setOldPriorities(JSON.parse(JSON.stringify(newPrioritesList)))

2. 修改状态时避免直接操作原状态

在setAdvertiserPriority里，不要直接修改原状态的对象，而是创建全新的数组和对象：

function setAdvertiserPriority(newPriority: string, index: number) {
    // 遍历原数组，仅修改目标位置的对象并创建副本
    const newWeights = advertisersPriorities.map((item, idx) => 
        idx === index ? {...item, priority: newPriority} : item
    )
    setAdvertisersPriorities(newWeights)
    updateEquilibriumTable()
}

这种方式完全不会影响原状态和oldPriorities里的对象，保证两个状态的独立性。

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