如何在tableUtils.jsx中使用useSelector

Question

我无法在 tableUtils.jsx 文件中使用 useSelector。

尝试访问状态值，但最终出错。React Hook“useSelector”无法在顶层调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

export const userDetails = useSelector((state) => state?.user?.userDetails);

这就是我的 utils.jsx 文件的样子

import { UserFilled, TrashCan } from '@carbon/icons-react';
const generateActionColumn = (item, deactivateStatus, auditTrialModal, classNames, deleteUser, onClickSendReminder) => (
  <div className="actionColumn" title={i18n.t('icons.rerenderUser')}>
    {item.status === classNames.invitedStatus ? (
      <Resend className="email" onClick={() => onClickSendReminder(item, true)} />
    ) : (
      <Resend className="email" style={{ visibility: 'hidden' }} />
    )}
    <span title={i18n.t('icons.deleteUser')}>
      <TrashCan className="delete icon_delete_user" onClick={() => deleteUser(item, true)} />
    </span>
    <OverflowMenu aria-label="overflow-menu" title={i18n.t('button.moreOptions')} flipped className="overflowMenuContainer">
      <OverflowMenuItem
        className={`tableDactivateButton ${
          item.status === classNames.registeredStatus
            ? classNames.deactiveClassname
            : item.status === classNames.deactivatedStatus
            ? classNames.activeClassname
            : ''
        }`}
        itemText={item.status === classNames.deactivatedStatus ? classNames.activateText : classNames.deactivateText}
        onClick={() => deactivateStatus(item, true)}
      />
      <OverflowMenuItem itemText={i18n.t('button.auditTrial')} onClick={() => auditTrialModal(item, true)} />
    </OverflowMenu>
  </div>
);

想要在 tableUtils.jsx 中使用状态值（非 React 组件）

Answer 1

是的。您不能在功能组件之外使用钩子。这就是它抛出错误的原因。如果您想在不同组件之间重用逻辑，我建议创建一个自定义挂钩。

const useTableUtils = () => { 
 const userDetails = useSelector((state) => state?.user?.userDetails);
 return {
       userDetails
   }
}

在组件内部使用如下

import {useTableUtils} from 'PATH_TO_ABOVE_FILE'

function YOUR_FUNCTIONAL_COMPONENT {

const { userDetails } = useTableUtils()

// Use the userDetails as you required 
}

您也可以在其他组件中重复使用上述自定义钩子。