Почему моя функция непреднамеренно выполняется два раза?

Question

У меня есть конструктор, метод get, componentDidMount и componentWillUnmount. Я хочу просто прослушать событие прокрутки и, в соответствии с этим, вызвать метод get. Если прокрутка находится внизу страницы, метод get вызывается один раз. Это все. Первый вызов componentDidmount () работает один раз, но когда я прокручиваю вниз, метод get работает два раза. Я не хочу, чтобы он выполнялся более одного раза.

Это мой код:

constructor(props) {
        super(props);
        cursor = -1
        id = auth().currentUser.providerData[0].uid
        this.state = {
            hits: [],
            isLoading: false,
            over: false,
            firstCall: true
        };
        this.get = this.get.bind(this)
        this.handleScroll = this.handleScroll.bind(this)
    }
    get() {
        this.setState({ isLoading: true });
        fetch("/1.1/followers/list.json?user_id=" + id + "&cursor=" + cursor + "", {
            headers: {
                'Authorization': 'MyToken',
            }
        }).then(response => response.json())
            .then(data => {
                if (data.next_cursor == 0) {
                    this.setState({ isLoading: false })
                    this.setState({ over: true })
                } else {
                    this.setState({ hits: this.state.hits.concat(data.users), isLoading: false })
                    cursor = data.next_cursor
                    console.log(data.next_cursor)
                }
            }).catch(error => {
                return
            })

    }
    componentDidMount() {
        this.get()
        window.addEventListener('scroll', this.handleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll(event) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            this.get()
        }
    }

А это вывод моей консоли.

1634251341094964000 ----> один раз

1614497980820334000 ----> два раза

1579177573029464600 ----> два раза

. , .

Они поступают из console.log (data.next_cursor) в функции get.

Answer 1

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

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

Другой вариант - использовать state и опору isLoading, которую вы уже определили:

get(){
    if(!this.state.isLoading){

       //use the setState callback param here so we don't run into async issues
       this.setState({isLoading: true}, () => {

          ... the rest of your logic ...

          //get is finished (either success or failure)
          this.setState({isLoading: false});
       }
    }
}