Reactjs 作为道具传递图像

我正在尝试将一个图像作为道具从Matchups对象传递到TeamGrid组件

Home.js

import React from "react";
import TeamGrid from "./TeamGrid.js";
import Prediction from "./Prediction.js";
import GridContainer from "./GridContainer.js";

//Matchups
import Matchups from "./Matchups.js";

export default function TeamSection() {
  return (
    <div>
      <GridContainer>
        <TeamGrid logo={Matchups[0].homeImg} alt={Matchups[0].homeAlt} />
        <Prediction />
        <TeamGrid logo={Matchups[0].awayImg} alt={Matchups[0].awayAlt} />
      </GridContainer>
    </div>
  );
}

我当前收到：“TypeError:无法读取未定义的属性“0”

---

我学习的反应，因为我去这个项目，所以任何帮助将不胜感激

你能这样试试吗：

import React from "react";
import TeamGrid from "./TeamGrid.js";
import Prediction from "./Prediction.js";
import GridContainer from "./GridContainer.js";

//Matchups
import {Matchups} from "./Matchups.js";

export default function TeamSection() {
  return (
    <div>
      <GridContainer>
        <TeamGrid logo={Matchups[0].homeImg} alt={Matchups[0].homeAlt} />
        <Prediction />
        <TeamGrid logo={Matchups[0].awayImg} alt={Matchups[0].awayAlt} />
      </GridContainer>
    </div>
  );
}

export const Matchups = [
  {
    homeImg: "Seahawks.gif",
    homeAlt: "Seahawks",
    awayImg: "Vikings.gif",
    awayAlt: "Vikings"
  },
  {
    homeImg: "Titans.gif",
    homeAlt: "Titans",
    awayImg: "Jaguars.gif",
    awayAlt: "Jaguars"
  }
];

import React from "react";
import TeamGrid from "./TeamGrid.js";
import Prediction from "./Prediction.js";
import GridContainer from "./GridContainer.js";

//Matchups
import {Matchups} from "./Matchups.js";

export default function TeamSection() {
  return (
    <div>
      <GridContainer>
        <TeamGrid logo={Matchups[0].homeImg} alt={Matchups[0].homeAlt} />
        <Prediction />
        <TeamGrid logo={Matchups[0].awayImg} alt={Matchups[0].awayAlt} />
      </GridContainer>
    </div>
  );
}

...
<TeamGrid logo={matchup.Matchups[0].homeImg} alt={matchup.Matchups[0].homeAlt} />```