Reactjs 在盖茨比的产品中不工作

我是盖茨比的新手。我正在尝试构建一个应用程序，在某个时候，我只需要使用react hook-useState和useffect。虽然它在本地为站点提供服务时对我来说很好，但在构建项目之后，该功能就不起作用了。通常，我会尝试向菜单中的每个项目添加onMouseLeave和onMouseEnter操作，然后操作各个项目。在生产构建中，似乎不支持Javascript。我知道在构建时我不能访问窗口和文档对象，但我根本不使用它。我甚至尝试在useEffect中显示一个简单的控制台日志-控制台中没有任何日志

我试着做类似的事情——它在本地起作用。一旦构建，逻辑就不会运行

<ul>
    {links.map((link) => {
        return <li id={link.id} onMouseEnter={() => setHoveredElement(link.id)} onMouseLeave={() => setHoveredElement(undefined)}>
            <Link to={link.path} aria-haspopup={!!link.items} aria-expanded={hoveredElement === link.id}>
                {link.title}
            </Link>
            {link.items && <HeaderSubMenu {...link} />}
        </li>;
    })}
</ul>

{links.map（（link）=>{
returnsetHoveredElement（link.id）}onMouseLeave={（）=>setHoveredElement（未定义）}>
{link.title}
{link.items&&}
；
})}

有人能解释一下这个案子吗？这是盖茨比的默认行为还是我做错了什么？

您缺少该属性

<ul>
    {links.map((link) => {
        return <li key={link.id} id={link.id} onMouseEnter={() => setHoveredElement(link.id)} onMouseLeave={() => setHoveredElement(undefined)}>
            <Link to={link.path} aria-haspopup={!!link.items} aria-expanded={hoveredElement === link.id}>
                {link.title}
            </Link>
            {link.items && <HeaderSubMenu {...link} />}
        </li>;
    })}
</ul>

{links.map（（link）=>{
return
setHoveredElement（link.id）}onMouseLeave={（）=>setHoveredElement（未定义）}>
{link.title}
{link.items&&}
；
})}

如果即使添加

键

，您的代码也无法工作，请尝试添加一个CodeSandbox，因为仅使用提供的代码很难找出问题所在