[英]React Hook useCallback has missing dependencies: 'params' and 'posts'. You can also do a functional update 'setPosts(p => …)
Exactly the whole error phrase is this.确切地说,整个错误短语是这样的。
React Hook useCallback has missing dependencies: 'params' and 'posts'.
React Hook useCallback 缺少依赖项:'params' 和 'posts'。 Either include them or remove the dependency array.
要么包含它们,要么删除依赖数组。 You can also do a functional update 'setPosts(p =>...)' if you only need 'posts' in the 'setPosts' call react-hooks/exhaustive-deps Line 80:6: React Hook useEffect has missing dependencies: 'params' and 'posts'.
如果您只需要 'setPosts' 调用 react-hooks/exhaustive-deps 中的 'posts' ,您还可以执行功能更新 'setPosts(p =>...)' 第 80:6 行:React Hook useEffect 缺少依赖项: “参数”和“帖子”。 Either include them or remove the dependency array
包括它们或删除依赖数组
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]);
This code is an infinite scroll function that brings a new post when the screen the user sees reaches the end of the page.此代码是一个无限滚动 function ,当用户看到的屏幕到达页面末尾时,它会带来一个新帖子。 However, the terminal showed a compilation error like the title.
但是,终端显示像标题一样的编译错误。 How to fix it?
如何解决? Any help would be greatly appreciated.
任何帮助将不胜感激。
Just add a params
and posts
on the second parameter of your useCallback
:只需在
useCallback
的第二个参数上添加一个params
和posts
:
const infiniteScroll = useCallback(() => {
// ...logic
}, [isLoading, params, posts]);
It means that you are using those variables inside the useCallback
function.这意味着您正在
useCallback
function 中使用这些变量。
It is part of react react-hooks/exhaustive-deps
rule.它是 react
react-hooks/exhaustive-deps
规则的一部分。
If you're using vscode I recommend installing linting stuff on your editor: https://github.com/facebook/react/issues/14920 so it'll warn you while coding.如果您使用的是 vscode,我建议在您的编辑器上安装 linting 的东西: https://github.com/facebook/react/issues/14920 ,这样它会在编码时警告您。
If you want to disable the rule you can put // eslint-disable-next-line react-hooks/exhaustive-deps
comment before the violating line if there is a good reason.如果你想禁用规则,如果有充分的理由,你可以在违规行之前
// eslint-disable-next-line react-hooks/exhaustive-deps
注释。
BUT, IT IS A BAD IDEA TO DISABLE IT.但是,禁用它是一个坏主意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.