React TS中map遍历对象数组提取键名与对应数组的实现问题

现有如下结构的页面对象数组：

let pages = [{'Home': ['exapmle 1', 'exapmle 2', 'exapmle 3']},
{'Services': ['exapmle 1', 'exapmle 2', 'exapmle 3']},
{'Technologies': ['exapmle 1', 'exapmle 2', 'exapmle 3']},
{'Insights': ['exapmle 1', 'exapmle 2', 'exapmle 3']},
{'Career': ['exapmle 1', 'exapmle 2', 'exapmle 3']},
{'About Us': []}];

需要实现的效果：遍历数组时，提取每个对象的键名（如Home、Services、Insights）作为按钮展示文案，提取键对应的字符串数组传递给DropDown组件作为下拉选项数据源。
当前编写的渲染代码存在错误，无法正常实现需求：

{pages.map((page) => (
    <Box sx={{flexGrow: 0}}>
        <Button onClick={handleOpenUserMenu} sx={{p: 0}}>
            {Object.keys(page)[0]}
        </Button>
        <DropDown item={page[])} anchorElUser={anchorElUser} handleCloseUserMenu={() => {
            setAnchorElUser(null);
        }}/>
    </Box>
))}

原有代码的核心问题：

• 仅提取了对象键名，没有同步获取键对应的下拉选项数组
• item={page[])}属于语法错误，无法完成正确的属性传值
• 列表渲染的最外层元素缺少唯一key标识，会触发React渲染警告

遍历每个页面对象时，先获取当前对象的唯一键（即页面名称），再通过键名取到对应的选项数组，分别传给按钮和DropDown组件即可，修正后的可运行代码如下：

{pages.map((page) => {
    // 提取页面名称（对象的唯一键）
    const pageName = Object.keys(page)[0];
    // 提取对应下拉选项数组
    const dropdownOptions = page[pageName];
    return (
        <Box sx={{flexGrow: 0}} key={pageName}>
            <Button onClick={handleOpenUserMenu} sx={{p: 0}}>
                {pageName}
            </Button>
            <DropDown 
                item={dropdownOptions} 
                anchorElUser={anchorElUser} 
                handleCloseUserMenu={() => setAnchorElUser(null)}
            />
        </Box>
    )
})}

补充说明：对于About Us这类对应空数组的项，DropDown组件接收到空数组后会自动渲染无选项的状态，不需要额外加判断逻辑。如果后续可以调整数据结构，建议把每个数组成员改成固定字段的结构（如{name: 'Home', items: ['exapmle 1', ...]}），遍历取值的逻辑会更直观简洁，不需要每次通过Object.keys取键名。

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