提交表单时内存泄漏

Question

我有一个控制对端点的请求的钩子和一个在提交时生成 post 的表单，它抱怨说在提交时它正在泄漏内存，但我看不到它在代码中的位置.

错误：

表格

const onSubmit = useCallback(
        ({ STRUCTURE_PARAMETER }: { STRUCTURE_PARAMETER: { [key: string]: string } }) => {
            return QUOTATION_SERVICES_HOOK.askForQuote({
                parameters: normalizeData(STRUCTURE_PARAMETER),
                productInfoId: STRUCTURE_FORM_HOOK.dataId || '',
                kindValue: switchMask,
            });
        },
        [STRUCTURE_FORM_HOOK.dataId, switchMask]
    );

HOOK

const useQuotation = () => {
    const AXIOS_HOOK = useAxiosFetch();
    const HISTORY_ROUTER_DOM_HOOK = useHistory();
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState<IQuotation[] | []>([]);
    const [queryPageInit, setQueryPageInit] = useState(1);
    const [queryPageEnd, setQueryPageEnd] = useState(0);

    const hasData = useMemo(() => data.length > 0, [data]);
    const dataLength = useMemo(() => data.length, [data]);
    const isPaginationEnd = useMemo(() => queryPageInit === queryPageEnd, [queryPageInit, queryPageEnd]);

    const fetchData = useCallback(async () => {
        setIsLoading(true);

        return AXIOS_HOOK.get<unknown, IQuotation[]>(`/Quotation?_page=${queryPageInit}&_limit=3`)
            .then((quotation) => {
                setData(quotation);
                setQueryPageEnd(quotation.length); // CRIAR LÓGICA CORRETA A PARTIR DO BACKEND
                setQueryPageInit(queryPageInit + 1); // CRIAR LÓGICA CORRETA A PARTIR DO BACKEND
            })
            .finally(() => setIsLoading(false));
    }, [AXIOS_HOOK, queryPageInit]);

    const askForQuote = useCallback(
        async (parameter: IAskForQuote) => {
            setIsLoading(true);
            toast.info('Aguarde, Solicitando Cotação...');

            return AXIOS_HOOK.post<unknown, IAskForQuote>(`/Quotation`, parameter)
                .then(() => HISTORY_ROUTER_DOM_HOOK.push('/stored'))
                .catch(() => toast.error('Ops, A cotação não pode ser solicitada!'))
                .finally(() => setIsLoading(false));
        },
        [AXIOS_HOOK]
    );

    return {
        isLoading,
        isPaginationEnd,
        data,
        dataLength,
        hasData,
        fetchData,
        askForQuote,
    };
};

export default useQuotation;

我真的看不到任何可能导致此泄漏的内容，我正在遵循文档标准。这个泄漏实际位于哪里，我做错了什么？

Answer 1

错误大概在这里：

            return AXIOS_HOOK.post<unknown, IAskForQuote>(`/Quotation`, parameter)
                .then(() => HISTORY_ROUTER_DOM_HOOK.push('/stored'))
                .catch(() => toast.error('Ops, A cotação não pode ser solicitada!'))
                .finally(() => setIsLoading(false));

你先调用历史HISTORY_ROUTER_DOM_HOOK.push('/stored')

然后您的组件可能会卸载，因为路由已更改并且您想呈现另一个页面。

然后调用 .finally(() => setIsLoading(false)); 更改已卸载的挂钩的状态。

也许你还有其他类似的地方，在你的代码中寻找类似的情况。

提交表单时内存泄漏

Memory leak when submitting form

reactjs

react-hook-form