说明情况:
当前正在处理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
但是我想添加这一行只是为了避免进一步的问题。
所以我的问题是:
- 还有其他解决方案来避免上述警告消息吗?
- 是否有其他解决方案,最佳实践或建议来重组上述共享代码段?
任何想法都非常感谢,谢谢!