如何从javascript中的对象数组（嵌套）中获取与值相关的数据？

Question

在这个项目中，我想检查项目中所有嵌套元素的路径，并希望对其进行详细分配。

但是根据useEffect中定义的函数，我无法检查嵌套项。

问题是，我想检查来自 useParams 的路径，其中包含嵌套对象在内的Items中的每个对象，并希望获取与该选择相关的数据

import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'; 
import Items from '../../Data/sidebar.json'


    function MainPage() {

        const { path } = useParams()
        console.log(path); //getting the path in console

        **const [data, setData] = useState([])**
    
        useEffect(() => {

            // console.log(Items); *//getting all nested array items*
            
            const details = Items.flat().find((i)=>i.path===(`/${path}`))
            setData(details)
    
        }, [path])
    
    
        console.log(data); //here not getting the values of nested objects
    
        return (
            <div>
    {.......somthing.......}
            </div>
        )
    }
    
    export default MainPage

出于参考目的，我附上了Items.json

[
  {
    "title": "Introduction",
    "path": "/"
  },
  {
    "title": "The Basics",
    "childrens": [
      {"id":"1",
        "title": "API basics",
        "path": "/api-basics"
      },
      {
        "title": "Account API Authentication",
        "path": "/account-api-authentication"
      }
    ]
  },
  {
    "title": "System Preparation",
    "childrens": [
      {
        "title": "Branding",
        "path": "/branding"
      },
      {
        "title": "None",
        "childrens": [
          {
            "title": "No data",
            "path": "/nodata"
          },
          {
            "title": "No data 1",
            "childrens": [
              {
                "title": "Integration",
                "path": "/integration"
              },
              {
                "title": "Subscription",
                "path": "/subscription"
              }
            ]
          },
          {
            "title": "Notifications",
            "path": "/notification"
          }
        ]
      }
    ]
  },
  {
    "title": "Support",
    "path": "/support"
  },
  {
    "title": "Help",
    "path": "/help"
  }
]

Answer 1

我希望这个答案会有所帮助，您可以检查具有无限孩子的路径。

 const Items = [ { title: "Introduction", path: "/", }, { title: "The Basics", childrens: [ { id: "1", title: "API basics", path: "/api-basics" }, { title: "Account API Authentication", path: "/account-api-authentication", }, ], }, { title: "System Preparation", childrens: [ { title: "Branding", path: "/branding", }, { title: "None", childrens: [ { title: "No data", path: "/nodata", }, { title: "No data 1", childrens: [ { title: "Integration", path: "/integration", }, { title: "Subscription", path: "/subscription", }, ], }, { title: "Notifications", path: "/notification", }, ], }, ], }, { title: "Support", path: "/support", }, { title: "Help", path: "/help", }, ]; const findDetails = async (data, path) => { try { const itemData = data ? data : Items; for (const obj of itemData) { if (obj.path === path) { return obj; } else { if (obj.hasOwnProperty("childrens") && obj.childrens.length > 0) { const data = await nestedCheck(obj, path); if (data) { return data; } } } } } catch (err) { console.log(err); } }; const nestedCheck = async (object, path) => { if (object && object.childrens.length) { for (const obj of object.childrens) { if (obj.path === path) { return obj; } else { if (obj.hasOwnProperty("childrens") && obj.childrens.length > 0) { const data = await nestedCheck(obj, path); if (data) { return data; } } } } } }; const details = async () => { let details = await findDetails(Items, "/integration"); console.log(details, "details"); }; details();

Answer 2

    const [data, setData] = useState([])
    
 useEffect(() => {
    
            let result;
    
            const nextFunction = (e) => {
                if (e.path == `/${path}`) {
                    result = e
                }
                else if (e.childrens && e.childrens.length) {
                    e.childrens.forEach((item) => {
                        nextFunction(item)
                    })
                }
            }
            Items.forEach((item) => {
                nextFunction(item)
            })
            setData(result)
    
        }, [path])
    
        console.log(data); //Now I am getting the values