通過不同的組件/頁面訪問數組數據

Question

我需要來自這個數組的 map 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>
  );
}

我需要替換硬編碼索引並使其動態化——我需要過濾嗎？ 還是 map 不同？ 我有點失落。 我正在使用動態路由（ <Link to={`/home/${item.name}`}/> ）來訪問頁面，因此是 match.params。

Answer 1

應用程序.js

import React from "react";
import Accordian from "./Accordian";
let data = [
  {
    name: "Apple",
    id: 1,
    alt: [{ name: "fruit1", description: "tbd" }]
  },
  {
    name: "Banana",
    id: 2,
    alt: [{ name: "fruit2", description: "tbd" }]
  },
  {
    name: "Blueberry",
    id: 3,
    alt: [{ name: "fruit3", description: "tbd" }]
  }
];
export default function App() {
  let output = [];
  data.map(item => output.push(...item.alt));

  return (
    <div>
      {output.map((item, i) => (
        <Accordian key={i.toString()} {...item} />
      ))}
    </div>
  );
}

手風琴.js

import React from "react";

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

Answer 2

 let data = [ { name: "Apple", id: 1, alt: [{ name: "fruit1", description: "tbd" }] }, { name: "Banana", id: 2, alt: [{ name: "fruit2", description: "tbd" }] }, { name: "Blueberry", id: 3, alt: [{ name: "fruit3", description: "tbd" }] } ]; let output = [] data.map(item=>output.push(...item.alt)); console.log(output)