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

Question

我正在努力改变const variable与useMemo的const问题。我从文档和教程中尝试了一些例子，但没有任何效果。这必须很容易…

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
}
];

所以我尝试了这个，但是它给了我错误

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

错误:

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.

——编辑添加数组类型

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

Answer 1

在你的"useMemo"尝试在数组中返回一个数组。我没有BottomSheetAction类型，但尝试用圆形括号替换外部方括号，即:

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

Answer 2

我认为bottomSheetOptions的类型是BottomSheetAction[]与您在useMemo回调中返回的类型不匹配。

我认为你返回的是一个数组，它包含一个包含BottomSheetAction类型项的数组。

您可以尝试将[[更改为[,]]更改为]吗?