React useParams返回undefined：漫威API搜索引擎组件传值异常

问题核心 #

字符串类型的英雄名称在路由传递时因编码/捕获逻辑问题，导致heroLinkName获取为undefined，最终输入框显示异常。数字类型正常是因为其在URL中无需特殊处理，而含空格、特殊字符的字符串易出现参数截断或未正确解析的情况。

具体修复步骤 #

1. 修正HeroComics组件的跳转逻辑 #

对字符串参数进行URL编码，避免特殊字符导致参数丢失：

<ul>
  {data.characters.items.length > 0 ? data.characters.items.map(character => (
    <li key={character.id}>
      {/* 编码字符串参数，适配含空格/特殊字符的英雄名 */}
      <Link to={`/home/${encodeURIComponent(character.name)}`}>
        {character.name}
      </Link>
    </li>
  )) : "No characters available"}
</ul>

2. 修复Home组件的参数处理逻辑 #

• 给useEffect添加正确依赖项，确保参数更新时重新执行
• 增加参数有效性判断，避免存入undefined到localStorage
• 解码参数还原原始字符串：

let { heroLinkName } = useParams();

const [heroName, setHeroName] = useState("");
// ...其他状态定义

useEffect(() => {
  if (heroLinkName) {
    const decodedHeroName = decodeURIComponent(heroLinkName);
    localStorage.setItem('heroName', decodedHeroName);
    setHeroName(decodedHeroName);
    handleClick(decodedHeroName);
  }
}, [heroLinkName]); // 依赖项绑定heroLinkName，参数变化时触发逻辑

3. 确认路由配置正确性 #

检查路由定义，确保参数名与useParams中的heroLinkName完全匹配：

// React Router路由配置示例
<Route path="/home/:heroLinkName" element={<Home />} />

4. 验证输入框状态绑定 #

确保搜索输入框正确关联heroName状态：

<input 
  type="text" 
  value={heroName} 
  onChange={(e) => setHeroName(e.target.value)} 
  placeholder="搜索英雄..."
/>

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