Javascript 映射到对象数组上，并在特定位置显示另一个元素

我不确定我的标题是否清楚

我正在写一个博客，目前我正在主页上显示一个帖子列表。 视觉上，我使用一个flexbox，其中有3行文章

要做到这一点，我只需映射一个post数组，这些post是包含post上所有信息的对象。 我知道我希望在第二篇文章的旁边添加一个时事通讯组来代替第三篇文章，第三篇文章将简单地包装并转到下一行

我目前的代码是：

<section className="post-feed">
   {currentList.slice(1).map(({ node }) => (
     // The tag below includes the markup for each post 
        components/common/PostCard.js
     // eslint-disable-next-line react/jsx-key
        <PostCard key={node.id} post={node} />
    ))}
</section>

{currentList.slice（1）.map（{node}）=>(
//下面的标记包括每个帖子的标记
组件/通用/明信片.js
//eslint禁用下一行react/jsx键
))}

---

我不确定如何将另一个组件插入此列表。

我将采用以下方法：

在map函数中编写一条if语句，检查map函数循环的当前项是否为最后/第三项（我假设last=third）。如果是这种情况，则渲染/返回新闻稿组件/块

---

试试看，让我知道它是否合适。

我会采用这种方法：

在map函数中编写一条if语句，检查map函数循环的当前项是否为最后/第三项（我假设last=third）。如果是这种情况，则渲染/返回新闻稿组件/块

---

试一试，让我知道它是否合适。

您可以使用地图键知道地图何时处于第三位置：

<section className="post-feed">
   {currentList.slice(1).map(({ node }, key) => (
        <>
            { key === 2 && <NewsletterComponent />}
            <PostCard key={node.id} post={node} />
        </>
    ))}
</section>

{currentList.slice（1）.map（{node}，key）=>(
{key===2&&}
))}

您可以使用地图键了解地图何时处于第三位置：

<section className="post-feed">
   {currentList.slice(1).map(({ node }, key) => (
        <>
            { key === 2 && <NewsletterComponent />}
            <PostCard key={node.id} post={node} />
        </>
    ))}
</section>

{currentList.slice（1）.map（{node}，key）=>(
{key===2&&}
))}

您是指内部

.map（）

方法您需要在

的同时返回一个组件？是的，我需要在第三个位置添加一个组件。您是指内部

.map（）

方法您需要在

的同时返回一个组件？是的，我需要在第三个位置添加一个组件。是的，这正是有效的！我试着添加了一个

I

而不是

key

，但它不起作用，但是我忘了使用

&

而不是使用

{I==2？：null}

！非常感谢！这确实有效！我试着添加了一个

I

而不是

key

，但它不起作用，但是我忘了使用

&

而不是使用

{I==2？：null}

！非常感谢您的回复！我采用了前面的解决方案，因为我尝试了类似的方法，但不知道为什么它不起作用！我可能错过了一些愚蠢的事情！谢谢你的回复！我采用了前面的解决方案，因为我尝试了类似的方法，但不知道为什么它不起作用！我可能错过了一些愚蠢的事情！