如何在我的产品 ID 页面中解构嵌套数组

Question

I'm trying to get the nested array inside the ProductId page. I'm getting the following error code:

cannot find undefined

I know that i'm doing wrong by writing Data.Items.find, but if not like this then How..? I want to know how to get the Data.Items array to get it matched with it's id using match.params. And the same goes to Resources page also, even there i'm unable to get my array matched.

what is the best way to do the destructuring to make it work.. ?

   //DATA STRUCTURE
      const Data = [
  {
    Branch: "Electrical",
    id: "AA",
    Items: [
      {
        name: "LIGHT FITTINGS",
        id: "1",
        description: "A wide range of light fittings for your need",
        resources: [
          {
            id: "1a",
            title: "Bulb",
            description:
              "This is for all the latest LED light fittings, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",                  
          },
          {
            id: "2a",
            title: "Tube light",
            description:
              "This is for all the latest LED light fittings, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",                
          },
          {
            id: "3a",
            title: "Tube light 2nd",
            description:
              "This is for all the latest LED light fittings, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
          }
        ]
      },
      {
        name: "SWITCH & SOCKETS",
        id: "2",
        description: "A wide range of Switches & sockets for your need",
        resources: [
          {
            id: "1b",
            title: "Switch",
            description:
              "This is for all the latest switches, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
          },
          {
            id: "3b",
            title: "15A Switch + Socket",
            description:
              "This is for all the latest switches, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
          },
          {
            id: "2b",
            title: "Socket",
            description:
              "This is for all the latest Sockets, no matter who you are, where you’re from and what you’re up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
          }
        ]
      }
    ]
  }
];
export default Data;

//Product ID page

import React from "react";
import Data from "../Data";
import { Link, Route, useRouteMatch, Switch } from "react-router-dom";
import Resource from "./Resource";



export default function ProductId({ match }) {
    let { path, url } = useRouteMatch();

 const productItem = Data.Items.find(({ id }) => id === match.params.productId);
    return (
        <div>
            <h2>ProductId page</h2>
            <div>{productItem.name}</div>

                <ul>
                {productItem.resources.map((sub) => (
               <li key={sub.id}>
                    <Link to={`${url}/${sub.id}`}>{sub.title}</Link>
               </li>
            ))}
            </ul>

            <Route path={`${path}/:subId`} component={Resource} />

        </div>
     );
     }

Answer 1

As I mentioned in the comment section the main problem is Data is also an array and it does not have Items as a property as you expect. Probably you need to loop through Data first then inside Items to find your id .

One solution can be to flatten your array first with .flatMap() then use .find() as before.

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.

See an example with one element from your array:

 const Data = [{ Branch: "Electrical", id: "AA",Items: [{name: "LIGHT FITTINGS",id: "1",description: "A wide range of light fittings for your need",resources: [{id: "1a",title: "Bulb",description:"This is for all the latest LED light fittings, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",},{id:"2a",title: "Tube light",description:"This is for all the latest LED light fittings, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",},{id: "3a",title:"Tube light 2nd",description:"This is for all the latest LED light fittings, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",}]},{name: "SWITCH & SOCKETS",id: "2",description: "A wide range of Switches & sockets for your need",resources: [{id: "1b",title: "Switch",description:"This is for all the latest switches, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",},{id: "3b",title: "15A Switch + Socket",description:"This is for all the latest switches, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",},{id: "2b",title:"Socket",description:"This is for all the latest Sockets, no matter who you are, where you're from and what you're up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",}]}]}] const routeId = '1'; const result = Data.flatMap(e => e.Items) .find(({id}) => id === routeId); console.log(result);