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

说明情况:

当前正在处理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

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

所以我的问题是:

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

任何想法都非常感谢,谢谢!

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

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3136429.html

大家都在问