Javascript 通过不同组件/页面访问阵列数据

我需要从此数组映射alt：

export const data = [
  {
    name: "Apple",
    id: 1,
    alt: [ name: "local fruit", description: "seasonal and stored" ]
  },
  {
    name: "Banana",
    id: 2,
    alt: [ name: "exotic fruit", description: "imported" ] 
  },
  {
    name: "Blueberry",
    id: 3,
    alt: [ name: "local fruit", description: "seasonal" ] 
  }
];

通过此组件：

export default function Accordion() {
  return (
    <>
      {data[1].alt.map((item, index) => (
        <Accordion item={item} key={index} />
      ))}
    </>
  );
}

并在此页面上访问它：

export default function Content({ match }) {

  const item = data.find(item => item.name === match.params.itemName);

  return (
    <WrapperDiv>
        <Button item={item} light>
          {item.name.toUpperCase()}
        </Button>
        <Accordion item={item} />
    </WrapperDiv>
  );
}

我需要替换硬编码索引并使其动态-我需要过滤吗？还是地图不同？我有点迷路了。 我使用动态路由访问页面，因此使用match.params。

让数据=[ { 名称：苹果， id:1， alt:[{名称：1，说明：待定] }, { 名称：香蕉， id:2， alt:[{名称：2，说明：待定] }, { 名称：蓝莓， id:3， alt:[{名称：3，说明：待定] } ]; 让输出=[] data.mapitem=>output.push…item.alt； console.logoutputApp.js

手风琴

import React from "react";

export default function Accordian({ name, description }) {
  return (
    <div>
      {name} -- {description}
    </div>
  );
}

---

您的数据数组似乎不正常，alt是一个数组，但您将其作为一个对象放入其中，alt必须是这种格式alt:[{名称：本地水果，描述：季节性和存储的}]@Mina Hawker check我发布了您的数组的示例解决方案@Mina Hawker check这是我在react中创建的示例，谢谢，但这似乎对我不起作用。。。我将如何在手风琴组件内部和内容页上定义它？谢谢！！太棒了！如果我只想基于名称映射一个alt，我如何指定它？

import React from "react";

export default function Accordian({ name, description }) {
  return (
    <div>
      {name} -- {description}
    </div>
  );
}