Javascript React Hook useCallback缺少依赖项-加载带有eslint disable next line警告的指示器

解释场景：

目前正在进行一个

React

项目，该项目具有连接到

Redux

的小型搜索功能。在搜索结果页面（这是一个功能组件）的场景中，当用户向下滚动到屏幕底部时，它将触发获取下面的项目，基本上实现无限滚动

我的解决方案按预期工作，只有警告消息让我感到不舒服

代码片段，警告消息：

在下面的示例中，我删除了与此问题无关的其他几行代码。我试着在这里添加一个极简主义的例子，我可以用它来解释我的场景。我已经删除了分页、偏移和其他与无限滚动相关的变量

代码将

doSearch

功能分离为

Redux

存储的原因是，它也用于不同的组件中。例如，在

主页

页面中，在重定向到

结果

页面之前会触发搜索

在

结果中

我有以下内容：

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
}

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

在

搜索

减速器中，您可以看到以下内容：

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
}

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

在执行

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”。要么包含它们，要么删除依赖项数组react hooks/dep

问题：

如果我将
isInProgress
变量添加到依赖项数组中，那么它将被无限触发。提取完成后，
isInProgress
的值变为
false
，这将再次启动
doSearch

显然，我可以通过在钩子中添加以下代码片段来忽略它：

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

但我觉得增加这一行只是为了避免进一步的问题

因此，我的问题是：

是否有其他解决方案来避免上述警告消息
是否有其他解决方案、最佳实践或建议来重构上述共享代码段
非常感谢您的任何想法，谢谢
 你找到解决方案了吗？@gerasalus Nope，即使在一次清理之后，我也得到了同样的结果，禁用了警告，所以目前仍然使用with
//eslint disable next line
。在组件中使用
isInProgress
可能是最好的选择，而不是从Redux商店。使用
const[isInProgress，setIsInProgress]=useState（false）
可以是消除警告的一种解决方案。