更新React state不覆盖原有状态的多维数组对象属性修改问题

你当前的代码仅对最外层的curState.layout做了浅拷贝，内层的node对象、settings属性、bp_uae_restrictions配置等所有嵌套对象，仍然和原state共享内存引用。直接修改这些内层对象的属性，会直接篡改原state的值，导致后续依赖原state的dispatch调用逻辑异常。

更新嵌套state只需要对所有要修改的层级做浅拷贝即可，无需全量深拷贝，性能最优：

UPDATE_RESTRICTION: (curState, payload) => {
  const updatedNodes = {...curState.layout}
  const accessProfile = BpUAE.accessProfileID
  const isRestricted = JSON.parse(payload.isRestricted)

  payload.nodes.forEach(nodeId => {
    // 逐层浅拷贝要修改的节点，不影响原state引用
    const targetNode = {...updatedNodes[nodeId]}
    const targetSettings = {...targetNode.settings}
    const restrictions = {...(targetSettings.bp_uae_restrictions || {})}
    const profileRestriction = {...(restrictions[accessProfile] || {})}

    // 修改拷贝后的对象
    profileRestriction.is_node_restricted = isRestricted
    restrictions[accessProfile] = profileRestriction
    targetSettings.bp_uae_restrictions = restrictions
    targetNode.settings = targetSettings
    updatedNodes[nodeId] = targetNode
  })

  return {layout: updatedNodes}
}

• 仅对payload指定的需要修改的node做逐层拷贝，未涉及的节点完全复用原引用，不会触发不必要的组件重渲染
• 所有修改都在拷贝后的对象上执行，完全不会影响原state的值

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