JSX映射元素中动态变量传参至usePageNameFormat报错求助

1. 语法错误修复：动态属性访问 #

你当前代码中 post.pageName.${locale} 的写法是无效JavaScript语法。要通过变量访问对象的动态属性，需使用方括号语法替代错误的模板字符串拼接方式。

替换：

post.pageName.${locale}

为：

post.pageName[locale]

2. React Hook使用规范（关键注意点） #

如果 usePageNameFormat 是React自定义Hook，不能在 map 循环内部调用它——这违反了React的Hook规则（Hook必须在组件顶层作用域调用，不能嵌套在循环、条件或嵌套函数中）。

解决方案分两种情况：

情况一：usePageNameFormat 是纯函数（非Hook）

若它只是普通格式化函数，直接在 map 中调用即可，修正后代码如下：

<>
  {navigationData && navigationData[0].navItems.map((post, index) => 
    <Link 
     key={index}
     href={`/pages/${usePageNameFormat(post.pageName[locale])}`}>
      {post.pageName[locale]} {/* 显示本地化后的页面名称，而非整个对象 */}
    </Link>
  )}
</>

情况二：usePageNameFormat 是React Hook

此时需将单个导航项拆分为独立组件，在组件顶层调用Hook：

// 子组件：单独处理每个导航链接
const NavItemLink = ({ pageName, locale }) => {
  const formattedPageName = usePageNameFormat(pageName[locale]);
  return (
    <Link href={`/pages/${formattedPageName}`}>
      {pageName[locale]}
    </Link>
  );
};

// 父组件中使用
<>
  {navigationData && navigationData[0].navItems.map((post, index) => 
    <NavItemLink 
     key={index}
     pageName={post.pageName} 
     locale={locale} />
  )}
</>

额外优化建议 #

• 避免使用数组索引作为 key，若 post 有唯一标识（如 id），改用该标识作为 key，提升渲染性能。
• 使用模板字符串拼接 href 比 + 更简洁易读。

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