React Hook useCallback 缺少依赖项：'params' 和 'posts'。你也可以做一个功能更新'setPosts(p => ...)

Question

整个错误短语就是这样。

React Hook useCallback缺少依赖项："params"one_answers"帖子"。包括它们或删除依赖项数组。你可以如果您只需要，还可以执行功能更新"setPosts(p=>…("setPosts"调用中的"posts"react hook/exclusive deps Line80:6:React Hook useEffect缺少依赖项："params"one_answers"帖子"。要么包括它们，要么删除依赖数组

const [posts, setPosts] = useState([]);
const [params, setParams] = useState(1);
const [isLoading, setIsLoading] = useState(false);

const infiniteScroll = useCallback(() => {
let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
let clientHeight = document.documentElement.clientHeight;
if (scrollTop + clientHeight === scrollHeight && isLoading === true) {
setIsScroll(true);
setTimeout(function () {
setPosts(posts.concat(posts));
setParams((state) => state + 1);
setIsLoading(false);
console.log(params);
}, 500);
}
}, [isLoading]);
useEffect(() => {
getTimeline(params).then((res) => {
if(res.data.posts === '') {
setIsScroll(false);
}
else if(posts === '' && res.data.posts === '') {
setNotFound(false);
}
else {
setNotFound(false);
setPosts(res.data.posts);
setIsLoading(true);
setIsScroll(false);
}

}).catch((err) => {
if(err.status === 403) {
refreshToken();
}
else {
if(err.status)
{
setStatusCode(err.status);
}
else setStatusCode("ERROR");
}
})
window.addEventListener("scroll", infiniteScroll);
return () => window.removeEventListener("scroll", infiniteScroll);
}, [infiniteScroll]);

这个代码是一个无限滚动功能，当用户看到的屏幕到达页面末尾时，它会带来一个新的帖子。然而，终端显示了类似标题的编译错误。如何修复？如有任何帮助，我们将不胜感激。

Answer 1

只需在useCallback:的第二个参数上添加params和posts

const infiniteScroll = useCallback(() => {
// ...logic
}, [isLoading, params, posts]);

这意味着您正在useCallback函数中使用这些变量。

它是reactreact-hooks/exhaustive-deps规则的一部分。

如果你使用的是vscode，我建议你在编辑器上安装linting的东西：https://github.com/facebook/react/issues/14920所以它会在编码时警告你。

如果您想禁用该规则，如果有充分的理由，可以将// eslint-disable-next-line react-hooks/exhaustive-deps注释放在违规行之前。

但是，禁用它是个坏主意。