为什么指定的对象也没有被写入

Question

我有一个反冲状态，它是一个结构如下的对象：

const Proposal = atom({
key: "PROPOSAL",
scopes: [{
assemblies: [{
items: [{}]
}]
}]
})

当UI中有一个项的更新时，我通过映射作用域、程序集和项来更新原子。当我找到我正在更新的正确项目时，我会记录当前项目，然后记录更新的项目。这些日志是正确的，所以我可以看到正在更新的值。但是当我到达第三个日志时，它并没有显示更新的值。

const [proposal, setProposal] = useRecoilState(Proposal)
const applyUpdatesToProposalObj = useCallback(_.debounce(params => {setProposal(proposal => {
setProposal(proposal => {
let mutable = Object.assign({}, proposal);
for(let i = 0; i < mutable.scopes.length; i++) {
let scope = mutable.scopes[i]
for(let j = 0; j < scope.assemblies.length; j++) {
let assembly = scope.assemblies[j]
for(let k = 0; k < assembly.items.length; k++) {
let item = assembly.items[k]
if(item._id === id) {
console.log('1', item)
item = {
...item,
...params
}
console.log('2', item)
}
}
}
}
console.log('3', mutable)
return mutable
})
}, 350), [])

日志的输出如下所示：

1 { ...item data, taxable: false }
2 { ...item data, taxable: true }
3 { scopes: [{ assemblies: [{ items: [{ ...item data, taxable: false }] }] }] } 

我设置了一个沙箱，您可以在其中查看行为https://codesandbox.io/s/young-dew-w0ick?file=/src/App.js

另一件奇怪的事情是，我在提案中有一个对象，叫做变更。我为changes对象设置了一个原子，并以类似的方式更新它，这正如预期的那样工作。

Answer 1

扩展我们在评论中的小对话：你必须克隆你想要变异的对象的整个树，一路上克隆每个级别。这在纯javascript中是相当乏味的，因此以牺牲一点性能为代价(本例一路上更新所有数组(，可以将其优化为可读性更强：

setProposal((proposal) => {
let mutable = proposal;
console.log("before", mutable);
mutable = {
...mutable,
scopes: mutable.scopes.map((scope) => ({
...scope,
assemblies: scope.assemblies.map((assembly) => ({
...assembly,
items: assembly.items.map((item) => {
if (item.id === id) {
return {
...item,
...params
};
} else {
return item;
}
})
}))
}))
};
console.log("after", mutable);
return mutable;
});