如何使用 lodash 修改深度嵌套對象數組的 object？

Question

我的 react js 應用程序中有一個對象數組，我想動態修改數組的內部 object； 下面是我的數組：

sections: [
            {
                id: 'e9904688-fd8a-476d-8f46-930bc4d888d1',
                name: 'sec-e9904688-fd8a-476d-8f46-930bc4d888d1',
                rows: [
                    {
                        id: '2f1bc178-d2bf-4283-ae9c-868513af789f',
                        name: 'row-2f1bc178-d2bf-4283-ae9c-868513af789f',
                        cols: [
                            {
                                id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa',
                                name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa',
                                isEmpty: false,
                                size: {
                                    lg: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 0, y: 0, w: 5, h: 4 },
                                    md: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 0, y: 0, w: 5, h: 4 },
                                    sm: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 0, y: 0, w: 5, h: 4 },
                                    xs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 0, y: 0, w: 5, h: 4 },
                                    xxs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 0, y: 0, w: 5, h: 4 }
                                },
                                controles: [
                                    {
                                        id: '37619580-6ba6-4058-a39b-2d57d23007d6',
                                        name: 'control name',
                                        type: 'control type',
                                        options: [
                                            {},
                                            {}
                                        ]
                                    }
                                ]
                            },
                            {
                                id: 'adad03c8-60f3-4db1-8c6c-a125bbd7f114',
                                name: 'col-adad03c8-60f3-4db1-8c6c-a125bbd7f114',
                                isEmpty: false,
                                size: {
                                    lg: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 6, y: 0, w: 7, h: 4 },
                                    md: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 6, y: 0, w: 7, h: 4 },
                                    sm: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 6, y: 0, w: 7, h: 4 },
                                    xs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 6, y: 0, w: 7, h: 4 },
                                    xxs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 6, y: 0, w: 7, h: 4 }
                                },
                                controles: [
                                    {
                                        id: '37619580-6ba6-4058-a39b-2d57d23007d6',
                                        name: 'control name',
                                        type: 'control type',
                                        options: [
                                            {},
                                            {}
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]

例如，我想用這個 {w: 1, h: 4, x: 0, y: 0, i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa"} 更改 lg 大小具有相同值的 cols用 lodash; 誰能幫我怎么做？

Answer 1

如果可能的話，您可以使用 immer，您可以在此處查看文檔頁面

它將創建草稿 state 並更新新的 object，而不更新主 object。

import produce from "immer";

const baseState = [
  {
    name: 'Swaraj',
    suname: 'Gandhi'
  },
  {
    name: 'Dhruva',
    surname: 'Dave'
  },
];

const nextState = produce(baseState, (draftState) => {
  draftState.push({ name: 'Ayush', surname: 'Kapoor' });
  draftState[1].suname = 'test';
});
// nextState = [{ name: 'Swaraj', suname: 'Gandhi' }, { name: 'Dhruva', surname: 'test'}, { name: 'Ayush', surname: 'Kapoor' }]