如何在Next.js中使用.map（）元标记

Question

我正在尝试对meta的内容进行映射，但是映射是复制整个meta标签的多次。这是我的代码。

{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次。我不想复制meta标签。我需要内容进行映射。

Answer 1

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

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

我只需要name1，name2进行映射。不是整个元标记映射多次。

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

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

那会给你

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

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

---

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

{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(',')} /> }