如何从嵌套结构JSON中提取React菜单与子菜单所需的两组数据

你可以直接遍历接口返回的原始数组，同步提取生成两个目标结构，实现代码如下：

基础处理逻辑 #

// originData 为你从接口拿到的JSON原始数据
const Array1 = []
const Array2 = {}

originData.forEach(menuItem => {
  // 提取一级菜单名存入Array1
  const menuName = menuItem.content
  Array1.push(menuName)
  // 提取对应子菜单列表存入Array2的对应属性
  Array2[menuName] = menuItem.Subtypes.map(subItem => subItem.content)
})

执行完成后得到的Array1和Array2就是你需要的格式。

React 场景使用示例 #

如果是在React组件中使用，你可以把处理逻辑放在接口请求的回调中，示例如下：

import { useState, useEffect } from 'react'

const MenuComponent = () => {
  // 对应你要的Array1：一级菜单列表
  const [firstLevelMenus, setFirstLevelMenus] = useState([])
  // 对应你要的Array2：一级菜单名和子菜单的映射对象
  const [subMenuMapping, setSubMenuMapping] = useState({})

  useEffect(() => {
    // 替换为你实际的接口请求逻辑
    fetch('/api/menu/list')
      .then(response => response.json())
      .then(originData => {
        const tempArr1 = []
        const tempArr2 = {}
        originData.forEach(item => {
          tempArr1.push(item.content)
          tempArr2[item.content] = item.Subtypes.map(sub => sub.content)
        })
        setFirstLevelMenus(tempArr1)
        setSubMenuMapping(tempArr2)
      })
  }, [])

  // 后续菜单渲染可直接使用上面两个状态变量
  return (
    <div className="menu-container">
      {/* 渲染示例 */}
      {firstLevelMenus.map(menuName => (
        <div key={menuName} className="first-level-menu">
          {menuName}
          <div className="sub-menu">
            {subMenuMapping[menuName].map(subName => (
              <div key={subName} className="sub-item">{subName}</div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

export default MenuComponent

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