Как я могу использовать константу из функции React в другом компоненте? [закрыто] ⇐ Javascript

[Anonymous]

У меня есть функция React, определенная внутри папки Helpers, и компонент, определенный в папке Components:

Код: Выделить всё

// hooks/useRecordingProof.ts
import { useCallback, useRef, useState } from "react";
import {
buildEventReportLinkPayload,
CreateEventReportLinkDTO
} from "@/helpers/recordingProof";

type Services = {
createEventReportLink: (dto: CreateEventReportLinkDTO) => Promise;
moveRecordingToRetention: (eventReportLinkId: number) => Promise;
};

type Options = {
recordingId: string;
eventReportId: number;
services: Services;
callback_onSuccess?: () => void;
onError?: (err: unknown) => void;
};

export function RecordingProofHelper(options: Options) {

const { recordingId, eventReportId, services, callback_onSuccess, onError } = options;
const [isMarking, setIsMarking] = useState(false);
const inFlight = useRef(false);

const markRecordingAsProof = useCallback( async () => {
if (inFlight.current) return;
inFlight.current = true;
setIsMarking(true);

try {
const payload_from_dto = buildEventReportLinkPayload(eventReportId, recordingId)
const { id: eventReportLinkId } = await services.createEventReportLink(payload_from_dto);
await services.moveRecordingToRetention(eventReportLinkId);
callback_onSuccess?.();
} catch (err) {
console.error("[useRecordingProof] erro no fluxo:", err);
onError?.(err);
} finally {
inFlight.current = false;
setIsMarking(false);
}

}, [eventReportId, recordingId, services, callback_onSuccess, onError]);

return { markRecordingAsProof, isMarking };

}

Как видите, код довольно прост: он создает EventReportLink и с возвращаемым идентификатором вновь созданного EventReportLink копирует запись в другую корзину в Google Cloud. Просто и понятно.
Теперь я хочу импортировать этот метод из моего RecordingProofHelper в свой основной компонент. Итак, когда я нажимаю простую кнопку, он выполняет этот метод. Должно быть также легко. Он также должен прочитать isMarking
Кнопка (тоже довольно просто):

Код: Выделить всё

 {
handleToggleKeepRecording(rec.id);
}}
/>

Мой метод handleToggleKeepRecording должен буквально вызывать мой markRecordingAsProof, созданный в моем помощнике useRecordingProof.

Код: Выделить всё

const handleToggleKeepRecording = (recordingId: string | number | undefined) => {
if (!recordingId || isSearchNow) return;
setIsSearchNow(true);

const recording = recordings.find((rec: Recording) => rec.id === recordingId);
if (!recording) return;

const query = generateEventReportLinkQuery(reportObj.id, recordingId, isAClip());

appServiceEventreport.getEventReportLink(query)
.then((response) => {
if (response.data.count > 0) {
unmarkRecordingAsProof(response.data.results, String(recordingId), recording);
} else {
// ##### Calling to the Helper Function #####
markRecordingAsProof(recordingId, reportObj.id); // →→ ##### Here! ##### ←←
// ##### Should Just Work #####
}
})
.catch((e) => {
return handleMarkingError(e);
})
.finally(() => {
setIsSearchNow(false);
});
};

Однако я попробовал импортировать его, и это не сработало. Я попробовал сделать это, импортировав isMarking и markRecordingAsProof в свой основной компонент из моего помощника:

Код: Выделить всё

import {useRecordingProof} from "@hooks/useRecordingProof.ts";

export const RecordingTable: React.FC = ({recordings, is_event}) => {
// ...  etc ...
// Try 1: Error 'must have a [Symbol.iterator]() method that returns an iterator.'
const [markRecordingAsProof, isMarking] = RecordingProofHelper

// Try 2: Same error as above
const [markRecordingAsProof, isMarking] = RecordingProofHelper();

// Try 3: Same error.
const [markRecordingAsProof, isMarking] = RecordingProofHelper({});

// ... etc ...
}

Итак, я провел небольшое исследование, чтобы узнать, как обычно выполняется этот вид импорта, но мне не удалось найти рабочий пример. Это ссылки, которые я исследовал и нашел:

• https://stackoverflow.com/a/68873886/8297745 - это посоветовало мне экспортировать мою функцию, которую я уже сделал, даже в соответствии с соглашением о функциях React, с заглавными буквами.
• https://stackoverflow.com/a/65394624/8297745 - это посоветовало мне использовать useState для экспортируемых переменных функции, но я попробовал применить этот пример и не нашел рабочего решения.
• https://stackoverflow.com/a/55034187/8297745 - в этом примере показано использование констант из экспортированной функции напрямую, но я не смог импортировать markRecordingAsProof и isMarking, чтобы иметь возможность сделайте это.
• Доступ к функции из компонента в другом компоненте в React — на этот вопрос было много ответов. Некоторые интересные, но я не смог применить их к своему сценарию, так как там сказали, что ОП должен изменить его на контекст и сделать данные доступными для основного компонента, но мой помощник должен использоваться в разных компонентах, расположенных на разных страницах, поэтому я не понял, как для этого использовать контекст.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -component