React.js：根据JSON响应填充反应表

Question

我有一个复杂的JSON响应，请参见下文：

[
    {
        "id": "E8895026-9BEA-4DB3-A9F5-AD1AEFASDF74A",
        "profileName": "Approver",
        "modules": [
            {
                "id": "4E948025-1F1B-41E2-A18D-55ADASDF810B",
                "module": "Client Maintenance",
                "description": "Client Enrollment",
                "actions": [
                    {
                        "id": "C7FCD770-7868-4357-8CA6-57ASDFDA1F1E",
                        "action": "ClientDetailsNew",
                        "description": "Enroll new Customer for Pesonet"
                    },
                    {
                        "id": "D324327C-6709-4AF0-B2B3-AAASDFFA6F4",
                        "action": "ClientDetailsDelete",
                        "description": "Delete Client details"
                    },
                    {
                        "id": "7DFA8A4C-2C56-4D89-875D-CE522413E81B",
                        "action": "ClientDetailsUpdate",
                        "description": "Modify Client details"
                    }
                ]
            },
            {
                "id": "C77C1031-2714-483D-AE59-21CASDFEBAEF",
                "module": "Bank Maintenance",
                "description": "Bank Enrollment",
                "actions": [
                    {
                        "id": "05D7DF97-C794-4648-AAA0-5ASDF5125B",
                        "action": "BankDetailsNew",
                        "description": "Enroll new bank for Pesonet"
                    },
                    {
                        "id": "03ABA996-FB9A-4DA5-BD7C-7EC5ASDF4A99",
                        "action": "BankDetailsDelete",
                        "description": "Delete bank details"
                    }
                ]
            }
        ]
    },
    {
        "id": "A0DF8291-D88C-440A-97EF-12EASEFIS29",
        "profileName": "Test Profile",
        "modules": [
            {
                "id": "4E948025-1F1B-41E2-A18D-55AD8646810B",
                "module": "Client Maintenance",
                "description": "Client Enrollment",
                "actions": [
                    {
                        "id": "C7FCD770-7868-4357-8CA6-ASDFF19128",
                        "action": "ClientDetailsNew",
                        "description": "Enroll new Customer for Pesonet"
                    },
                    {
                        "id": "7DFA8A4C-2C56-4D89-875D-ASDFFS1282",
                        "action": "ClientDetailsUpdate",
                        "description": "Modify Client details"
                    }
                ]
            },
            {
                "id": "C77C1031-2714-483D-AE59-ASDFSDF",
                "module": "Bank Maintenance",
                "description": "Bank Enrollment",
                "actions": [
                    {
                        "id": "912SDGS-FB9A-4DA5-BD7C-7EC5E31F4A99",
                        "action": "BankDetailsDelete",
                        "description": "Delete bank details"
                    }
                ]
            }
        ]
    }
]

我正在为自己的表使用react-bootstrap-table-next库

我使用以下表格填充表格：

    const [profiles, setProfiles] = useState([])

    useEffect(() => {
        retrieveProfiles();
      }, []);

    const retrieveProfiles = useCallback(() => {
        ProfileMaintenanceService.retrieveProfiles()
        .then((response) => {
          console.log("ProfileMaintenanceService - retrieveProfiles response.data >>> " + response.data)
          setProfiles(response.data);
        }).catch((err) => {
          console.log("ProfileMaintenanceService - retrieveProfiles catch >>> " + err)
        })
      });

    /* CLIENT */
      const columnsClient = [
        {
        headerStyle: {
          backgroundColor: '#a6a6a6'
        },
        dataField: 'profileName',
        text: 'Name',
        sort: true,
        filter: textFilter()
        }, 

        {
        headerStyle: {
            backgroundColor: '#a6a6a6'
        },
        dataField: '',
        text: 'Creator',
        sort: true
        }, 

        {
        headerStyle: {
            backgroundColor: '#a6a6a6'
        },
        dataField: 'creationdate',
        text: 'Creation Date',
        sort: true
        }, 

        {
        headerStyle: {
            backgroundColor: '#a6a6a6'
        },
        dataField: 'lastmodifier',
        text: 'Last Modifier',
        sort: true
        }, 

        {
        headerStyle: {
            backgroundColor: '#a6a6a6'
        },
        dataField: 'lastmodification',
        text: 'Last Modification',
        sort: true
        }, 
      ];

      const selectRowClient = {
        mode: 'checkbox',
        clickToSelect: true,
        clickToEdit: false,
        hideSelectAll: false,
        hideSelectColumn: false,
        onSelect: (row, isSelect, rowIndex) => {
          setProfileName(row.profileName)
          console.log('useEffect selectedModules', selectedModules);
          console.log('useEffect row.modules.moduleId', row.modules);
          // setSelectedModules(row.moduleId)
        }
      };

    /* Pagination */
      const customTotal = (from, to, size) => (
        <span className="react-bootstrap-table-pagination-total">
          Showing { from } to { to } of { size } Results
        </span>
      );

      const options = {
        paginationSize: 4,
        pageStartIndex: 0,
        alwaysShowAllBtns: true, 
        hideSizePerPage: true,
        firstPageText: 'First',
        prePageText: 'Back',
        nextPageText: 'Next',
        lastPageText: 'Last',
        nextPageTitle: 'First page',
        prePageTitle: 'Pre page',
        firstPageTitle: 'Next page',
        lastPageTitle: 'Last page',
        showTotal: true,
        paginationTotalRenderer: customTotal,
        sizePerPageList: [{
          text: '5', value: 5
        }, {
          text: '10', value: 10
        }, {
          text: 'All', value: data.length
        }] 
      };

    return (
    <BootstrapTable
                  keyField='id'
                  hover
                  data={ profiles }
                  columns={ columnsClient }
                  filter={ filterFactory() }
                  selectRow={ selectRowClient }
                  noDataIndication="No record(s) found."
                  pagination={ paginationFactory(options) }
                />
    )

但是，我只能正确获取profileName的值。

深入json的记录如何？

例如在“模块”>“描述”下

如何像访问状态的键值对那样访问状态中的每个值？我应该使用地图吗？

TIA