如何在 Next.js 中使用 .map() 元标记

Question

我正在尝试 .map 元的内容，但映射是整个元标记的多次复制。 这是我的代码。

{general.head.articleAuthor.en.map(( ) => (
          <meta property="article:author" content={general.head.articleAuthor.en} />
        ))}

export const general = {
head: {
articleAuthor: {
en: ['name1', 'name2']}
}
}

我期待输出应该是这样的<meta property="article:author" content="name1,name2"/>

但我的代码映射为这个<meta property="article:author" content="name1,name2"/> <meta property="article:author" content="name1,name2"/>

现在，如果我添加name3那么它会将整个元映射 3 次。 我不想复制元标记。 我需要要映射的内容。

Answer 1

...但映射是多次复制整个元标记...

我可以想到两种解释。 但在你写的评论中：

我只需要 name1, name2 来映射。 不是多次映射整个元标记。

这听起来像你想有一个单一meta包含所有作者的标签。 为此，请使用join而不是map ：

<meta property="article:author" content={general.head.articleAuthor.en.join(", ")} />
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^

那会给你

<meta property="article:author" content="name1, name2"} />

或类似。 字符串是分隔符。 因此，如果您不希望逗号后有空格，只需将其从", "更改为"," 。

---

我阅读这个问题的另一种方式，我现在认为这是不正确的，但可能对其他人有用，是您希望每个作者都有一个meta 。 为此，请使用传递给map而不是在content使用general.head.articleAuthor.en的值：

{general.head.articleAuthor.en.map(author => (
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^
  <meta property="article:author" content={author} />
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^
))}

Answer 2

而不是在迭代中全部使用当前 obj：

{general.head.articleAuthor.en.map((obj) => (
      <meta property="article:author" content={obj} />
 ))}

我期待输出应该是这样的<meta property="article:author" content="name1,name2"/>

由于en被定义为一个数组，因此您可以使用.join()来获取一个元标记中的所有值。 它不需要映射。

{ <meta property="article:author" content={general.head.articleAuthor.en.join(',')} /> }