function HomeList(props) {
const [{data,isLastPage}, setData] = useState({
data: [],
isLastPage: false
});
const getData = () => {
flag = false;
request("/api/app/recommend", {
params: {
list_code: props.listcode,
page,
preview: 0
}
}).then(res => {
let tmp = (res.msg === "lastpage" || isLastPage) ? true : false;
if (tmp) {
window.removeEventListener("scroll", hd);
}
setData(data => ({data:data.data.concat(res.data),isLastPage:tmp}));
flag = true;
});
page++;
};
const onScroll = () => {
const target = window.document.documentElement;
const offsetH = target.offsetHeight;
const scrollH = target.scrollHeight;
const triggerH = scrollH * 0.5;
const scrollTop = window.pageYOffset;
//滚动过页面高度一半加一屏高度后加载数据
if (scrollH - offsetH - scrollTop < triggerH) {
if (flag) {
getData();
}
}
};
const hd = throttle(onScroll, 500);
useEffect(() => {
getData();
window.addEventListener("scroll", hd);
return () => {
window.removeEventListener("scroll", hd);
page = 1;
flag = true;
};
}, []);
useLayoutEffect(() => {
//here !!!!!!!!!!!!
if (data.length < 18 && data.length > 0 && !isLastPage) {
getData();
}
},[data])
Я хочу удалить прокрутку eventListener, когда сообщение API является «последней страницей»,
но реагирующие хуки создают новую функцию hd в каждом useEffect. Если последняя страница
в useLayoutEffect изменить, removeEventListener не работает.
Пожалуйста, используйте английский язык все время. Пожалуйста, не включайте китайские комментарии в свой код. Иначе люди, которые хотят вам помочь, этого не поймут.





Нам нужно будет прослушивать изменения в isLastPage, и мы собираемся добавить прослушиватель событий только тогда, когда isLagePage имеет значение false.
useEffect(() => {
if (!isLastPage) {
document.addEventListener('scroll', scroll);
}
return () => document.removeEventListener('scroll', scroll);
}, [isLastPage]);
Имеет ли смысл добавить проверку if в оператор возврата?
в операторе return первое значение islastpage равно false, поэтому removeEventListener не запускается.
наконец-то я так пишу, и это работает return () => { document.removeEventListener("scroll", hd); };
@ 孙方斌 Вы правы useEffect зафиксируйте зависимости, и мы должны проверить, не является ли он последним, потому что именно тогда он будет изменен.
Что означает не работа - он просто не удаляет слушателя или вы получаете какую-то ошибку? Если последнее, опубликуйте сообщение об ошибке