Пользовательские хуки со списками зависимостей и eslint-plugin-реагировать-хуки - PullRequest
Новая
       4

Пользовательские хуки со списками зависимостей и eslint-plugin-реагировать-хуки

2 голосов
/ 06 февраля 2020

У меня есть вопрос, касающийся eslint-plugin-реаги-hooks.

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

export const loading = Symbol('Api Loading');
export const responseError = Symbol('Api Error');

export function useApi<T>(
    apiCall: () => CancelablePromise<T>,
    deps: DependencyList
): T | (typeof loading) | (typeof responseError) {
    const [response, setResponse] = useState<T | (typeof loading) | (typeof responseError)>(loading);
    useEffect(() => {
        const cancelablePromise = apiCall();
        cancelablePromise.promise
            .then(r => setResponse(r))
            .catch(e => {
                console.error(e);
                setResponse(responseError);
            });
        return () => cancelablePromise.cancel();
    }, deps); // React Hook useEffect has a missing dependency: 'apiCall'. Either include it or remove the dependency array. If 'apiCall' changes too often, find the parent component that defines it and wrap that definition in useCallback (react-hooks/exhaustive-deps)
    return response;
}

Теперь пользовательский хук отлично работает, но eslint-plugin-реагировать-хуки не так уж и много. Предупреждение в моем коде не является большой проблемой. Я знаю, что могу замолчать это предупреждение, добавив комментарий: 

// eslint-disable-next-line react-hooks/exhaustive-deps

Проблема заключается в том, что один из пользовательских аргументов перехвата - это список зависимостей, а доза eslint-plugin-Reaction-hooks не обнаруживает отсутствующие зависимости от него. , Как заставить eslint-plugin-реагировать-ловушки правильно обнаруживать проблемы со списком зависимостей для моей настраиваемой ловушки? Возможно ли даже такое обнаружение для пользовательских хуков?

1 Ответ

0 голосов
/ 08 февраля 2020

Похоже, списки зависимостей, поскольку аргументы в пользовательских хуках не поддерживаются в eslint-plugin-Reaction-hooks (насколько я знаю). Существует обходной путь с useCallback, как и предложено dangerismycat.

Поэтому вместо выполнения: 

const apiResult = useApi(() => apiCall(a, b, c), [a, b, c]);

Та же функциональность может быть достигнута без настраиваемого хука, имеющего аргумент списка зависимостей: 

const callback = useCallback(() => apiCall(a, b, c), [a, b, c]);
const apiResult = useApi(callback);

Хотя это позор, что он вводит немного больше шаблонного кода и код немного сложнее для чтения, я не возражаю против этого слишком много.

...