UseEffect не может удалитьEventListener

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 не работает.

Что означает не работа - он просто не удаляет слушателя или вы получаете какую-то ошибку? Если последнее, опубликуйте сообщение об ошибке

barbsan 26.04.2019 09:29

Пожалуйста, используйте английский язык все время. Пожалуйста, не включайте китайские комментарии в свой код. Иначе люди, которые хотят вам помочь, этого не поймут.

Siu Ching Pong -Asuka Kenji- 26.04.2019 15:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
2
1 377
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нам нужно будет прослушивать изменения в isLastPage, и мы собираемся добавить прослушиватель событий только тогда, когда isLagePage имеет значение false.

useEffect(() => {
  if (!isLastPage) {
    document.addEventListener('scroll', scroll);
  }
  return () => document.removeEventListener('scroll', scroll);
}, [isLastPage]);

Имеет ли смысл добавить проверку if в оператор возврата?

dance2die 26.04.2019 07:23

в операторе return первое значение islastpage равно false, поэтому removeEventListener не запускается.

孙方斌 26.04.2019 09:26

наконец-то я так пишу, и это работает return () => { document.removeEventListener("scroll", hd); };

孙方斌 26.04.2019 09:37

@ 孙方斌 Вы правы useEffect зафиксируйте зависимости, и мы должны проверить, не является ли он последним, потому что именно тогда он будет изменен.

Asaf Aviv 26.04.2019 09:37

Другие вопросы по теме