Javascript 如何在我的产品Id页中分解嵌套数组

我正在尝试获取

ProductId

页面中的嵌套数组。我得到以下错误代码：

找不到未定义的

我知道我写Data.Items.find是做错了，但如果不是这样，那怎么办。。？我想知道如何获取Data.Items数组，以便使用match.params将其与其id匹配。资源页面也是如此，即使在那里我也无法匹配我的数组

要使其正常工作，最好的方法是什么

   //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;

//产品标识页

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>
     );
     }

从“React”导入React；
从“./Data”导入数据；
从“react router dom”导入{Link，Route，useRouteMatch，Switch}；
从“/Resource”导入资源；
导出默认函数ProductId（{match}）{
让{path，url}=useRouteMatch（）；
const productItem=Data.Items.find（（{id}）=>id==match.params.productId）；
返回(
ProductId页
{productItem.name}

{productItem.resources.map（（sub）=>(

{sub.title}

))}

);
}

正如我在评论部分提到的，主要问题是

数据也是一个数组，并且它没有您期望的
项作为属性。您可能需要先循环查看
数据
，然后在
项目中
找到您的
id

一种解决方案可以是先将阵列展平，然后像以前一样使用

flatMap（）
方法首先使用映射函数映射每个元素，然后将结果展平到新数组中。它与深度为1的
map（）
后跟
flat（）
相同，但是
flatMap（）
通常非常有用，因为将两者合并到一个方法中会稍微更有效

请参见包含数组中一个元素的示例：


const Data=[{Branch:“electronic”，id:“AA”，Items:[{name:“灯具”，id:“1”，description:“满足您需要的各种灯具”，参考资料：[{id:“1a”，title:“Bulb”，description:“这适用于所有最新的LED灯具配件，无论您是谁，您来自何处，您在做什么。我们的通用品牌是ASOS的独家产品，我们的所有配件系列都为您提供：ASOS曲线、高大、娇小和孕妇装。由我们创建，由您设计。”，}，{id:“2a”，标题：“筒灯”，描述：这是所有最新的LED灯配件，无论你是谁，来自哪里，你在做什么。我们的通用品牌是ASOS独有的，我们的所有配件系列都为你而设：ASOS曲线、高大、娇小和孕妇装。由我们创建，由你设计。“，}，{id:“3a”，标题：“筒灯第二”，描述：这适用于所有最新的LED灯具配件，无论您是谁、来自何处以及您在做什么。我们的通用品牌是ASOS的独家产品，为您提供所有配件范围：ASOS曲线、高大、娇小和孕妇装。由我们创建，由您设计。“，}]}，{名称：“开关和插座”，id:“2”，描述：根据您的需要提供多种交换机和插座”，参考资料：[{id:“1b”，标题：“交换机”，说明：这是所有最新的交换机，无论您是谁，您来自何处，您在做什么。我们的通用品牌是ASOS独家为您提供的，并在我们的所有适合范围内提供：ASOS曲线、高大、娇小和母性。由我们创建，由您设计。“，}，{id:“3b”，标题：“15A交换机+插座”，描述：这是所有最新的交换机，无论您是谁，您来自何处，您在做什么。我们的通用品牌是ASOS独家为您提供的，并在我们的所有适合范围内提供：ASOS曲线、高大、娇小和母性。由我们创建，由您设计。“，}，{id:“2b”，标题：“插座”，描述：这是为所有最新的插座设计的，无论您是谁、来自何处以及您在做什么。我们的通用品牌是ASOS的独家产品，我们为您提供所有的贴合范围：ASOS曲线、高大、娇小和母性。由我们创建，由您设计。“，}]}]
常数routeId='1'；
const result=Data.flatMap（e=>e.Items）
.find（（{id}）=>id==routeId）；
console.log（结果）
主要问题是
数据
也是一个数组，它没有您期望的
项
属性。可能您需要先循环
数据
，然后在
项
中找到您的
id
。是的..我想循环我的数据并找到嵌套的项数组。我已经编写了数据。我不知道如何以正确的方式循环..。
数据[0]。项目
-或者删除
数据
周围的第一组方括号，将其转换为代码所期望的对象。是的，先生..flatMap（）这个方法对我来说很有效。而且对我来说是新的。谢谢你让我知道这个方法。你救了我一天。谢谢你。。！！