Next.js多语言下拉切换重复显示问题修复求助

你的问题确实出在两层map嵌套上：router.locales有3个语言项，每个项又循环遍历一次language数组的3个元素，最终3×3=9条重复内容。

直接去掉外层的router.locales.map，只遍历language数组即可——你的language数组已经包含了所有需要的语言配置（locale、名称、国旗代码），完全不需要再借助router.locales做二次循环。

修复后的代码如下：

const language = [
  {
    locales: 'fa',
    name: 'فارسی',
    country_code: 'ir'
  },
  {
    locales: 'en',
    name: 'English',
    country_code: 'gb'
  },
  {
    locales: 'ar',
    name: 'العربیه',
    country_code: 'sa'
  }
]

let router = useRouter()

return (
    <>
     
<div className="dropdown">
<button className="btn btn-link color-link  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<GlobeIcon />
</button>
  <ul className="dropdown-menu">
      {/* 直接遍历language数组，生成3个正确的选项 */}
      {language.map((lang) =>(
          <li key={lang.locales}>
            <Link href={router.asPath} locale={lang.locales}>
              <span className={`flag-icon flag-icon-${lang.country_code} mx-5`}>
                  {lang.name}
              </span>
            </Link>
        </li>
      ))} 
  </ul>
</div>
</>
)

额外优化两个细节：

• 将key值改为lang.locales，保证每个列表项的key唯一，避免React控制台警告
• 移除了多余的<a>标签，Next.js的<Link>已经封装了跳转逻辑，无需嵌套额外的<a>标签

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