ユーザーが複数のスクロールを実行しないようにする

Question

HomePageContainersには、AJAXリクエストのデータを保持し、HomePageコンポーネントに渡します。 HomePageコンポーネントは、スクロールをサポートする上位関数InfiniteScrollによって構成されます。

InfiniteScrollは次のようになります。

componentDidMount() { 
    window.addEventListener('scroll', this.onScroll.bind(this), false); 
} 

componentWillUnmount() { 
    window.removeEventListener('scroll', this.onScroll.bind(this), false); 
} 

onScroll() { 
    if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 200)) { 
     const { scrollFunc } = this.props; 
     scrollFunc(); 
    } 
} 

私はコードは、彼らが1を解雇したら、スクロールを防ぎ、データを要求から到着まで待ちたいです。以下のような何か：

((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 200)) + //a new condition to make sure only scroll happens when data arrives or fails. 

AJAX要求/応答に応じて、その状態を更新するために起こっているscrollFuncがHomePageContainersから受信されることに注意してください。

@Igorsveeが述べたようにHomePageContainersにスクロール状態を保存できますが、その状態をスクロールイベントの処理を担当するInfiniteScrollコンポーネントに移動したいとします。

どうすればよいですか？

if(this.props.isFetching){ 
    scrollFunc(); 
} 

isFetchingはtrue時に次のようになります。HomePageContainersコンポーネントの問題のAjaxリクエストということ、それは状態だと、あなたは新しいisFetchingフラグを追加することができますし、あなたは条件付きでそれを呼び出すことができるようにscrollFuncと一緒にそれを渡すと仮定

Answer 1

成功またはエラーで終了すると、要求が開始されます（false）。 それとも、scrollFunc自体の内部条件ロジックを持つことができます：

if(this.state.isFetching){ 
... 
}