javascript - 如何在我的产品 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;

//产品ID页面

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

标签： javascriptreactjsreact-hooksreact-router-dom

Answer 1

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

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

该flatMap()方法首先使用映射函数映射每个元素，然后将结果展平为新数组。它与深度为 1的 amap()后跟 a相同，但通常非常有用，因为将两者合并到一个方法中效率更高。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);