在这个例子中如何使用 useMemo？

Question

I'm struggling with problem chaning const variable to const with useMemo. I tried some example from docs and some tutorials and nothing worked for me. This have to be easy...

const bottomSheetOptions: BottomSheetAction[] = [
    {
      label:
        t('kebabMenu.send') +
        (count > 1 ? t('kebabMenu.documents', { count }) : ''),
      icon: <SendIcon />,
      state: sendVisible,
      dismiss: () => showSendAlert(),
      onClick: () => showSendAlert(),
      alertType: 'sendInvoice',
      disabled: count > 0,
      visible: documentType === 'sales'
    },
    {
      label: t('kebabMenu.download'),
      icon: <DownloadIcon />,
      state: downloadVisible,
      dismiss: () => showDownloadDocumentsModal(),
      onClick: () => showDownloadDocumentsModal(),
      alertType: 'download',
      disabled: true,
      visible: true
    }
  ];

So i'm tried this but it gives me error

const bottomSheetOptions: BottomSheetAction[] = useMemo(() => [[
    {
      label:
        t('kebabMenu.send') +
        (count > 1 ? t('kebabMenu.documents', { count }) : ''),
      icon: <SendIcon />,
      state: sendVisible,
      dismiss: () => showSendAlert(),
      onClick: () => showSendAlert(),
      alertType: 'sendInvoice',
      disabled: count > 0,
      visible: documentType === 'sales'
    },
    {
      label: t('kebabMenu.download'),
      icon: <DownloadIcon />,
      state: downloadVisible,
      dismiss: () => showDownloadDocumentsModal(),
      onClick: () => showDownloadDocumentsModal(),
      alertType: 'download',
      disabled: true,
      visible: true
    }
  ]], [documentType, downloadVisible, sendVisible, showDownloadDocumentsModal, showSendAlert]) 

Error:

Type '{ label: string; icon: Element; state: boolean; dismiss: () => void; onClick: () => void; alertType: string; disabled: boolean; visible: boolean; }[][]' is not assignable to type 'BottomSheetAction[]'.
  Type '{ label: string; icon: Element; state: boolean; dismiss: () => void; onClick: () => void; alertType: string; disabled: boolean; visible: boolean; }[]' is missing the following properties from type 'BottomSheetAction': label, icon, state, dismiss, and 4 more.

---EDIT--- Adding type of array BottomSheetAction

export type BottomSheetAction = {
  label: string;
  icon: React.ReactNode;
  state: boolean;
  dismiss: () => void;
  onClick: () => void;
  alertType: 'download' | 'sendInvoice';
  disabled: boolean;
  visible: boolean;
};

Answer 1

I think that the type of bottomSheetOptions which is BottomSheetAction[] doesn't match what you return inside the useMemo callback.

I think that you are returning an array which contains a single array which contains items of type BottomSheetAction .

Could you try changing [[ to [ and ]] to ] ?

Answer 2

In your "useMemo" attempt you are returning an array in an array. I don't have the BottomSheetAction type, but try replacing the outer square bracket with round ones, ie:

const bottomSheetOptions: BottomSheetAction[] = useMemo(() => [
    {
      label:
        t('kebabMenu.send') +
        (count > 1 ? t('kebabMenu.documents', { count }) : ''),
      icon: <SendIcon />,
      state: sendVisible,
      dismiss: () => showSendAlert(),
      onClick: () => showSendAlert(),
      alertType: 'sendInvoice',
      disabled: count > 0,
      visible: documentType === 'sales'
    },
    {
      label: t('kebabMenu.download'),
      icon: <DownloadIcon />,
      state: downloadVisible,
      dismiss: () => showDownloadDocumentsModal(),
      onClick: () => showDownloadDocumentsModal(),
      alertType: 'download',
      disabled: true,
      visible: true
    }
  ], [documentType, downloadVisible, sendVisible, showDownloadDocumentsModal, showSendAlert])