Next.js中使用.map()处理meta标签时重复生成标签的问题

嘿，我懂你现在的困扰——你本来想处理作者数组来生成meta标签，结果用.map()遍历的时候，每一个数组元素都生成了一整个<meta>标签，导致标签重复出现。其实你根本不需要用map来遍历生成标签，换个思路就能搞定！

问题根源 #

你当前的代码用.map()遍历general.head.articleAuthor.en数组的每一项，每遍历一次就返回一个完整的<meta>标签，所以数组里有几个作者名，就会生成几个一模一样的标签。这显然不是你想要的效果。

正确解决方案 #

你需要的是把数组里的所有作者名拼接成一个逗号分隔的字符串，然后直接放到单个<meta>标签的content属性里就可以了，这里用数组的.join(',')方法就能轻松实现：

// 直接用join拼接数组元素，生成单个meta标签
<meta property="article:author" content={general.head.articleAuthor.en.join(',')} />

效果说明 #

当你的数组是['name1', 'name2']时，.join(',')会把它转换成字符串'name1,name2'，对应生成的标签就是你期望的：

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

如果后续数组新增了'name3'，这个方法会自动把它拼进去，生成content="name1,name2,name3"的单个标签，完全符合你的需求。

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