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 ---->两次

。。

它们来自get函数中的console.log（data.next_cursor）。

Answer 1

由于窗口/滚动条似乎多次触发了该事件，因此您需要避免在代码中重复调用。有多种方法可以执行此操作，具体取决于上下文和要求。这里有几个选择。

您可以debounce the function call。如果您只需要确保在特定时间范围内仅调用一次，那就很好了。

另一种选择是使用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});
       }
    }
}

为什么我的函数无意中执行了两次？

1 个答案: