在 AstroJS 组件中循环数组

Question

我尝试在 Astro.js 组件中循环一个数组，但它不返回任何内容：在我的示例中，为了便于阅读，我将 Astro.props 中的卡片 const 替换为硬编码卡片 const。我没有从 forEach 循环中得到任何东西，但最后的 Card 组件显示正确。

如果我将循环中的 Card 组件替换为像 div（空 div）这样的基本组件，它仍然不起作用，但是如果我将其替换为 console.log(card)，我确实在终端，因此循环有效。

如果需要，我可以提供 Card.astro 文件，但我认为它与这里无关。

  ---
    import Card from './Card.astro';
    import type { Props as CardProps } from './Card.astro';

type Props = { cards: CardProps[] };

// const { cards } = Astro.props;
const cards = [
  {
    gradientFrom: '#125245',
    gradientTo: '#fe1548',
    title: 'Boo',
    to: '/link1',
  },
  {
    gradientFrom: '#125245',
    gradientTo: '#fe1548',
    title: 'second card',
    to: '/link2',
  },
];
---

<div class="cards">
  {
    cards.forEach((card) => (
      <Card
        gradientFrom={card.gradientFrom}
        gradientTo={card.gradientTo}
        to={card.to}
        title={card.title}
      />
    ))
  }
  <Card
    gradientFrom={cards[0].gradientFrom}
    gradientTo={cards[0].gradientTo}
    to={cards[0].to}
    title={cards[0].title}
  />
</div>

Answer 1

forEach 方法不返回任何内容。你能把 forEach 改成 map 函数吗？

<div class="cards">
  {
    cards.map((card) => (
      <Card
        gradientFrom={card.gradientFrom}
        gradientTo={card.gradientTo}
        to={card.to}
        title={card.title}
      />
    ))
  }
  <Card
    gradientFrom={cards[0].gradientFrom}
    gradientTo={cards[0].gradientTo}
    to={cards[0].to}
    title={cards[0].title}
  />
</div>