需要一个函数，使用 lodash 从数组中的两个嵌套对象中解析出数据，并将其作为 prop 传递给 react 组件

Question

我有一个反应组件，它需要从 1 个数据数组中的几个嵌套对象在后台动态预加载几个数组中的一些值。

import React, {
  useEffect
} from "react";

export function layoutComponent({
  config,
  LayoutRenderer
}) {
  const loadModules = (name) => queryModule(name);
  useEffect(() => {
    const modules = parseModules(config);
    modules.forEach(module => loadModules(module));
  }, [])


  return ( <
    LayoutRenderer config = {
      modules
    }
    />
  )
}

layoutComponent.propTypes = {
  LayoutRenderer: PropTypes.node.isRequired,
  config: PropTypes.shape({}).isRequired,
}

我需要使用parseModules并创建一个函数来解析下面称为config的对象数组。 我需要从config.header.customizableArea.slots.modules.name获取name值，我还需要获取overview.slots.modules.name

config =  [{
  "name": "Default",
  "description": "This is the default layout configuration.",
  "userGroup": "gg-servicing-wings-ccp",
  "header": {
    "accountEnabled": true,
    "ucidEnabled": true,
    "journeySearchEnabled": true,
    "customizableArea": {
      "className": "",
      "height": "",
      "slots": [{
          "slotId": "00",
          "layout": "",
          "visibleModule": "servicing-card-art",
          "className": "dls-white-bg",
          "size": {
            "sm": {
              "rowSpan": "1",
              "colSpan": "6"
            },
            "md": {
              "rowSpan": "1",
              "colSpan": "6"
            },
            "lg": {
              "rowSpan": "1",
              "colSpan": "6"
            }
          },
          "modules": [{
            "name": "servicing-card-art",
            "props": ["accountToken", "accountToken:accountTokenToDisplay"]
          }]
        },
        {
          "slotId": "01",
          "layout": "",
          "visibleModule": "servicing-card-art",
          "className": "dls-white-bg",
          "size": {
            "sm": {
              "rowSpan": "1",
              "colSpan": "6"
            },
            "md": {
              "rowSpan": "1",
              "colSpan": "6"
            },
            "lg": {
              "rowSpan": "1",
              "colSpan": "6"
            }
          },
          "modules": [{
            "name": "servicing-card-art",
            "props": ["accountToken", "accountToken:accountTokenToDisplay"]
          }]
        }
      ]
    }
  },
  "overview": {
    "className": "",
    "height": "",
    "slots": [{
        "slotId": "00",
        "layout": "",
        "visibleModule": "servicing-card-art",
        "className": "dls-white-bg",
        "size": {
          "sm": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "md": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "lg": {
            "rowSpan": "1",
            "colSpan": "2"
          }
        },
        "modules": [{
          "name": "servicing-card-art",
          "props": ["accountToken", "accountToken:accountTokenToDisplay"]
        }]
      },
      {
        "slotId": "01",
        "layout": "",
        "visibleModule": "servicing-card-art",
        "className": "dls-white-bg",
        "size": {
          "sm": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "md": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "lg": {
            "rowSpan": "1",
            "colSpan": "2"
          }
        },
        "modules": [{
          "name": "servicing-card-art",
          "props": ["accountToken", "accountToken:accountTokenToDisplay"]
        }]
      },
      {
        "slotId": "02",
        "layout": "",
        "visibleModule": "servicing-card-art",
        "className": "dls-white-bg",
        "size": {
          "sm": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "md": {
            "rowSpan": "1",
            "colSpan": "2"
          },
          "lg": {
            "rowSpan": "1",
            "colSpan": "2"
          }
        },
        "modules": [{
          "name": "servicing-card-art",
          "props": ["accountToken", "accountToken:accountTokenToDisplay"]
        }]
      }
    ]
  },
  "autoLaunch": ["servicing-card-replacement"]
}]

Answer 1

下面的内容适用于我从您的示例数据中生成一个包含name字段的列表，尽管它们是相同的模块名称，所以不确定您是否还需要其他东西......

const parseModules = (config) => {
  const modules = [];
  // Loop over objects in config.header
  config.forEach(conf => {
    conf.header.customizableArea.slots.forEach(slot => {
      slot.modules.forEach(module => modules.push(module.name))
    })
  });
  // Loop over objects in config.overview
  config.forEach(conf => {
    conf.overview.slots.forEach(slot => {
      slot.modules.forEach(module => modules.push(module.name))
    })
  });
  return modules;
}
const modules = parseModules(config);

结果： ["servicing-card-art", "servicing-card-art", "servicing-card-art", "servicing-card-art", "servicing-card-art"]