redux 如何在tableUtils.jsx中使用useSelector

y3bcpkx1 于 2023-06-23 发布在其他

关注(0)|答案(1)|浏览(93)

我无法在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组件）中使用状态值

redux

来源：https://stackoverflow.com/questions/76455950/how-to-use-useselector-inside-tableutils-jsx

1条答案

按热度按时间

uhry853o1#

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

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 
}

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

赞(0）回复(0）举报 2023-06-23

我来回答

redux 如何在tableUtils.jsx中使用useSelector

1条答案

相关问题

热门标签

最新问答