React嵌套map内用useNavigate传参出现意外令牌错误求助

开发者阿泽

2026-8-12

问题分析与解决建议

1. 直接触发语法错误的原因

你的代码里箭头函数语法写错了：在onClick={() ={这一行，箭头函数的正确写法是() => {，少写了一个>符号，这就是导致「unexpected token」错误的直接原因。

修正后的核心代码片段：

<a onClick={() => {
  navigate(`/products/${index.categoryname}/${subcat.categoryname}`, {
    state: {
      categoryid: subcat.categoryid,
      parentcategoryid: index.categoryid,
      showAll: false
    }
  });
}}>

2. 额外需要优化的细节

阻止a标签默认跳转行为：a标签默认会触发页面刷新跳转，会和React Router的客户端路由冲突，需要在点击事件中添加阻止默认行为的逻辑：

<a onClick={(e) => {
  e.preventDefault(); // 阻止默认刷新跳转
  navigate(`/products/${index.categoryname}/${subcat.categoryname}`, {
    state: {
      categoryid: subcat.categoryid,
      parentcategoryid: index.categoryid,
      showAll: false
    }
  });
}}>

不要用索引作为key：当前代码用循环索引i、j作为列表项的key，当列表项顺序变化或增删时，容易导致React渲染异常，建议改用数据中唯一的标识（比如index.categoryid、subcat.categoryid）：
```
<li key={index.categoryid}>
// ...
<li key={subcat.categoryid}>
```
修正target属性：a标签的target属性合法值为_blank、_self等，你当前设置的target={i}不符合规范，若不需要打开新页面，直接移除该属性即可。