Question

说明情况：

当前正在处理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'。要么包含它们，要么删除依赖项数组react-hooks / exhaustive-deps

问题：

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

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

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

但是我想添加这一行只是为了避免进一步的问题。

所以我的问题是：

还有其他解决方案来避免上述警告消息吗？
是否有其他解决方案，最佳实践或建议来重组上述共享代码段？

任何想法都非常感谢，谢谢！

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

0 个答案: