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

Question

我正在尝试在ProductId页面中获取嵌套数组。 我收到以下错误代码：

找不到未定义

我知道我通过编写 Data.Items.find 做错了，但如果不是这样，那么如何..？ 我想知道如何使用 match.params 获取 Data.Items 数组以使其与其 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>
     );
     }

Answer 1

正如我在评论部分提到的，主要问题是Data也是一个数组，它没有您期望的Items作为属性。 可能您需要先循环遍历Data然后在Items中找到您的id 。

一种解决方案是先使用.flatMap()将数组展平，然后像以前一样使用.find() 。

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

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

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