Увеличить значение в select с помощью React

#javascript #reactjs

Вопрос:

Я хочу увеличить номер страницы, когда моя прокрутка из select будет внизу.
демонстрация: https://codesandbox.io/s/select-with-search-field-antd484-forked-wqnro?file=/index.js

 const scroll = (e) => {
  let page = 1;
  e.persist();
  const { target } = e;
  if (target.scrollTop   target.offsetHeight === target.scrollHeight) {
    page  = 1;
    console.log(page);
    fetch("https://randomuser.me/api/?results="   page)
      .then((response) => response.json())
      .then((body) => {
        console.log(body);
      });
  }
};

Прокрутка, которую я получаю каждый раз 2 console.log(page); , но мне нужно увеличивать значение каждый раз, когда я буду прокручивать в нижней части раздела прокрутки, кроме того, когда я вернусь, я должен уменьшать число каждый раз, когда прокрутка будет вверху.
Вопрос: В чем проблема в моем коде и как ее решить?

1. let page = 1; Необходимость находиться вне scroll метода, потому что теперь вы сбрасываете его при каждом вызове scroll метода. Возможно, в компонентах state ? И вы также должны использовать флаг, чтобы установить и проверить, получаете ли вы в данный момент следующую страницу, чтобы не переиздавать больше fetch запросов.

Ответ №1:

В вашем коде переменная страницы всегда начинается с 1, поэтому я думаю, что вам нужно иметь состояние внутри компонента, чтобы сохранить переменную страницы следующим образом

 const [page, setPage] = useState(1)

const scroll = (e) => {
  e.persist();
  const { target } = e;
  if (target.scrollTop   target.offsetHeight === target.scrollHeight) {
    setPage(prev => prev   1)
    console.log(page);
    fetch("https://randomuser.me/api/?results="   page)
      .then((response) => response.json())
      .then((body) => {
        console.log(body);
      });
  }
};

1. это приведет к выборке с предыдущим значением page , поскольку setPage является асинхронным.

2. затем вы можете просто увеличить состояние страницы на setPage и использовать page 1 в функции выборки.

Ответ №2:

Инициализируйте переменную вне функции, попробуйте это :

   let page = 1; // initialise variable outside the function
  const scroll = (e) => {
  e.persist();
  const { target } = e;
  if (target.scrollTop   target.offsetHeight === target.scrollHeight) {
    page  = 1;
    console.log(page);
    fetch("https://randomuser.me/api/?results="   page)
      .then((response) => response.json())
      .then((body) => {
        console.log(body);
      });
  }
};

Ответ №3:

Правильным подходом было бы переместить page переменную в локальное состояние и, когда прокрутка достигает конца, увеличить страницу, позволить a useEffect обрабатывать выборку новых данных.

Предполагая, что вы используете реагирующие хуки

 import React, { useCallback, useEffect, useState } from "react";


const YourComponent = () => {

  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);

  const scroll = useCallback(({
    target
  }) => {
    if (isFetching) return;
    if (target.scrollTop   target.offsetHeight === target.scrollHeight) {
      setPage(prevPage => prevPage   1);
    }
  }, [isFetching]);

  useEffect(() => {
    fetch("https://randomuser.me/api/?results="   page)
      .then((response) => response.json())
      .then((body) => {
        console.log(body);
      });
  }, [page])

  return // your render code here
}

Ответ №4:

Вы вызываете свою функцию прокрутки каждый раз, когда прокручивается всплывающее окно: итак, что она делает, это просто сбрасывает страницу на единицу и добавляет 1 внизу, консоль печатает 2 каждый раз.

Вы должны сохранить страницу в состояние. Тем не менее, поскольку метод setState является асинхронным, вам потребуется извлечь ваши данные в ловушку useEffect:

 useEffect(() => {
    fetch("https://randomuser.me/api/?results="   page)
      .then((response) => response.json())
      .then((body) => {
        console.log(body);
      });
  },[page]);

Этот хук будет выполняться каждый раз, когда состояние вашей страницы будет обновляться.

Кстати, попробуйте использовать ref вместо ванильного document.getElementById(), чтобы получить высоту прокрутки