React useParams 返回未定义

Question

我正在使用 Marvel API 构建一个搜索引擎。我有一个 HeroComics 组件和一个 Home 组件。我正在尝试使用 HeroComics 中的以下代码将 {character.name} 从 HeroComics 传递到 Home：

<ul>
  {data.characters.items.length &gt; 0 ? data.characters.items.map(character =&gt; (
  <li>{character.name}</li>)) : "No characters available"}
</ul>

这里是首页的相关代码：

    let { heroLinkName } = useParams();

    const [heroName, setHeroName] = useState("");
    const [heroes, setHeroes] = useState([]);
    const [hero, setHero] = useState([]);

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);

    const buttonNameRef = useRef();

    useEffect(() => {
        localStorage.setItem('heroName', heroLinkName);
        const heroName = localStorage.getItem('heroName');
        setHeroName(heroName);
        handleClick(heroName);
    }, []);

英雄名称（作为字符串）应该从 HeroComics 传递到 Home 并作为“heroName”进入本地存储，然后作为“const heroName”从本地存储中拉出，然后设置为输入值并单击，但搜索输入显示未定义。

我怎样才能解决这个问题并让输入显示正在传递的实际值？发生这种情况是因为该值是一个字符串而不是数字，因为当我使用数字时它在其他页面上工作正常。

Answer 1

我觉得你应该改变你的

let { heroLinkName } = useParams();

到

let { name } = useParams();