useCallback 与 React.lazy

编程问答 2023-01-06

问题描述

我正在使用 Antd Icon 在我的应用中创建菜单。因为在 antd v4 中，我无法导入带有字符串 - found in here 的图标（他们强制使用 import {icon} from "@ant-design/icons"），所以我使用 React.lazy 来暂停导入。>

然后，用我的菜单，我像这样创建

{MENU.map((item) => {
   return (
       <Menu.Item            
           icon={<CustomIcon icon={item.icon} />}
           key={item.key}
           className="sider__item"
            >              
              {item.title}
       </Menu.Item>
         );
})}

这是我的自定义图标

const CustomIcon: FC<ICustomIcon> = ({ icon,className }) => {
  const AntIcon = React.lazy(
    () => import(`@ant-design/icons/es/icons/${icon}`)
  );

  return <AntIcon className={className} />;
};

如果我使用这种方法，当用户单击菜单项时，菜单会在 1 秒内闪烁 - 这很烦人。 然后我应用了useCallback，一切都很好，点击菜单项时没有闪烁，但是我有这个eslint错误

const CustomIcon: FC<ICustomIcon> = ({ icon,className }) => {
  const AntIcon = useCallback(
    React.lazy(() => import(`@ant-design/icons/es/icons/${icon}`)),[icon]
  );

  return (
    <Suspense fallback={null}>
      <AntIcon className={className} />
    </Suspense>
  );
};

useCallback 中的 ESLint 警告

React Hook useCallback received a function whose dependencies are unkNown. 
Pass an inline function instead.eslintreact-hooks/exhaustive-deps

请告诉我如何解决这个警告，或者我们可以忽略这个吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antdantdantdlazy-loadingreactjsreactjsreactjsreactjsusecallback