javascript - 使用扩展运算符执行深层复制 - 无法复制最后一级状态

Question

我有一个应用程序，它有一个列表，当单击一个项目时，会使用所选列表项的子类别中的数据填充另一个列表。当在父列表中单击列表项时，API 调用会检索数据以填充子列表。多个项目导致多个 API 调用。

单击父列表中的多个项目时，我需要将每个父列表中的多个子添加到子列表中。我试图限制我的应用程序中的依赖项数量，因此我尽可能多地使用 ES6+。

我正在使用扩展运算符制作嵌套状态的多个浅表副本。我正在努力的状态切片如下所示：

{
  tables: {
    tablesLoading: false,
    error: null,
    selectedTables: [],
    tables: {
      byId: {
        '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_1a',
          fields: []
        },
        '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_1b',
          fields: []
        },
        '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_2a',
          fields: []
        }
      },
      allIds: [
        '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0',
        '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0',
        '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0'
      ]
    }
  }
}

初始 API 调用从服务器中提取与前两个 ID（'9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0' 和 '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0'）相对应的数据。然后我单击父列表中的另一个项目，并希望将第三个项目添加到 tables.byId 对象，然后将相应的 ID 添加到 tables.allIds 数组。我的代码是：

const tableRequestSuccess = (state, action) => {
    const tableVals = action.tableVals;
    const datasetName = action.datasetName;  
    const tableUUIDs = tableVals[datasetName].map(val=>(uuidv1())); 
    let addedtablesById = {};
    for (let i = 0; i<tableUUIDs.length; i++){ 
        let tableId = tableUUIDs[i];
        addedtablesById[tableId]={
            id: tableId,
            value: tableVals[datasetName][i],
            fields: []
        }
    }
    **const updatedTablesById =  updateObject(state.tables.byId, addedtablesById)**
    const updatetableAllIds = [...state.tables.allIds, ...tableUUIDs]

    const updatedProperties = {
        byId: updatedTablesById,
        allIds: updatetableAllIds
    };
    return updateObject(state, {
        tablesLoading: false,
        error: null,
        tables: updateObject(state.tables, updatedProperties)
    });
}

我的问题是我不确定如何在存储单个对象的状态树部分进行复制，即 state.tables.byId.THE_RESPECTIVE_IDS。这给我留下了最里面的对象，这些对象引用了原始对象，因此状态不会一成不变地更新。但是因为 ID 会有所不同，并且数量会不断变化，所以我不确定如何复制这些最后的对象。我怀疑到目前为止的所有状态都已被克隆。

我为可读性创建了一个辅助函数：

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    }
}

有关如何使用扩展运算符完成此操作的任何指示？

标签： javascriptreactjsreduxreact-redux