AstroJS组件中数组循环无渲染问题求助

我尝试在Astro.js组件中循环数组，但没有任何渲染结果。为了提升可读性，我把Astro.props里的cards常量换成了硬编码数据。forEach循环没有生成任何内容，但末尾单独调用的Card组件显示正常。

如果把循环内的Card组件换成基础元素比如空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>

问题出在**forEach方法没有返回值**，Astro的模板表达式需要接收一个可渲染的元素数组才能正确渲染内容，而forEach只是遍历数组执行回调，不会返回任何内容（默认返回undefined）。

把forEach替换成map方法即可，map会遍历数组并返回一个新的元素数组，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.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>

另外，为了符合列表渲染的规范，建议给每个循环生成的Card组件添加唯一的key属性（优先使用数据中的唯一标识，比如card.to）：

cards.map((card) => (
  <Card
    key={card.to}
    gradientFrom={card.gradientFrom}
    gradientTo={card.gradientTo}
    to={card.to}
    title={card.title}
  />
))

内容的提问来源于stack exchange，提问作者eephyne