В React Hook useCallback отсутствуют зависимости - индикатор загрузки с предупреждением eslint-disable-next-line - PullRequest
Новая
       10

В React Hook useCallback отсутствуют зависимости - индикатор загрузки с предупреждением eslint-disable-next-line

1 голос
/ 08 ноября 2019

Объяснение сценария:

В настоящее время работает над проектом React с небольшой функцией поиска, подключенной к Redux. В сценарии на странице результатов поиска - который является функциональным компонентом - когда пользователь прокручивает вниз до нижней части экрана, он инициирует выборку следующих элементов, в основном реализуя бесконечную прокрутку.

Мое решение работаеткак и ожидалось, только предупреждающее сообщение вызывает ошибку.

Фрагменты кода, предупреждающее сообщение:

В приведенном ниже примере я удалил несколько других строк кода, которые не связанык этой проблеме. Я попытался добавить здесь минималистский пример, которым я мог бы объяснить свой сценарий. Я удалил страницу, смещение и другие переменные, которые связаны с бесконечной прокруткой.

Причина, по которой код разделяет функциональность doSearch на хранилище Redux, если он используется и в другом компоненте,Например, на странице Home поиск запускается перед перенаправлением на страницу Result.

В Result у меня есть следующее: 

const Result = (props) => {
    const {search, doSearch} = props;
    const {isInProgress} = search;

    const onScroll = useCallback(() => {
        // removed additional checks if user reached the bottom of the screen
        if (!isInProgress) {
            // on start => isInProgress = true;
            // on finish => isInProgress = false;
            doSearch();
        }
    }, [doSearch]); // removed isInProgress => warning message

    useEffect(() => {
        window.addEventListener('scroll', onScroll);
    }, [onScroll]);

    // ... rest of the code
}

В search редуктор вы можете увидеть следующее: 

const initialState = {
    isInProgress: false,
    assets: [],
    // ...
};

export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
        case Consts.FETCH_ASSETS_SUCCESS:
            const { data } = action.response;
            return {
                ...state,
                assets: data.assets,
                isInProgress: false,
                // ...
            };
        case Consts.SET_SEARCH_IN_PROGRESS:
            return {
                ...state,
                isInProgress: true
            };
        // ... rest of the reducer
    }
};

В action, где происходит doSearch: 

export const doSearch = () => async dispatch => {
    dispatch({type: Consts.SET_SEARCH_IN_PROGRESS});

    // ... rest of the code

    let response = await assetsService.getAssets();

    dispatch(response.status === 200 ?
        {type: Consts.FETCH_ASSETS_SUCCESS, response: response}:
        {type: Consts.FETCH_ASSETS_ERROR, error: response});
}

Предупреждающее сообщение, отображаемое терминалом:

React Hook useCallback не имеет зависимостей: isInProgress. Либо включите их, либо удалите массив зависимых реагирующих зацепок / исчерпывающим образом

Вопросы:

Если я добавлю переменную isInProgress в массив зависимостейтогда это будет срабатывать бесконечно. Как только выборка завершится, значение isInProgress изменится на false, который снова начнет doSearch.

Очевидно, я мог бы проигнорировать это, добавив следующий фрагмент в ловушку: 

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

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

Итак, мои вопросы:

  1. Есть ли какое-либо другое решение, чтобы избежатьупомянутое предупреждающее сообщение?
  2. Любое другое решение, лучшая практика или совет по реструктуризации приведенных выше фрагментов общего кода?

Любая идея высоко ценится, спасибо!

...