时间戳

首页 > 解决方案 > React 钩子在 gatsby productioin 构建中不起作用

reactjs - React 钩子在 gatsby productioin 构建中不起作用

问题描述

我是盖茨比的新手。我正在尝试构建一个应用程序，在某些时候我只需要使用一个反应钩子——useState 和 useEffect。虽然在本地服务站点时它对我来说很好，但在构建项目后该功能不起作用。通常，我尝试将 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>

有人可以解释这个案子吗？这是 gatsby 的默认行为还是我做错了什么？

标签： reactjsreact-hooksgatsby

解决方案

您缺少该key属性。

<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>

如果即使添加key，您的代码也不起作用，请尝试添加 CodeSandbox，因为很难仅使用提供的代码会出错。

推荐阅读