なぜデバウンスは私の機能を呼び出さないのですか？

Question

何かに取り組んでいるとmobxです。

私はイメージカルーセルコンポーネントを作成しました。ここで私はクリックされたイメージを表示します。 私はの前にとの次ののボタン（それ自体がコンポーネントです）を持って、画像間を移動します。

は私が lodash debounce、 でそれらのアクション（ PREVと 次）をラップしようとしましたが、何かが途中で失敗します。

私の現在のストアは、それらのアクションがあります。

debounceAction

• prevCarousel
• nextCarousel
• debounceAction
だけの高階関数で取得する2つのパラメータ（FN、待ちます） 、これらのパラメータを使用して lodash debounceを呼び出しますrs。

私のCarouselButtonコンポーネントは、上で述べた動作をその小道具を介して取得します。コンポーネントIの内部でonClickイベントでトリガーし、実際のアクション（、または、または、次に）を呼び出すと、debounceAction(fn, wait)が呼び出されます。

私の行動を正しい方法でデバウンスする方法はわかりません。

Iは、（CarouselButton成分で）第2のコードスニペットでdebounceAction（デバウンスをラップHOF）を呼び出します。

ここに私の間違いがありますか？

galleryStore.jsx - 現在のストア：

class GalleryStore { 

    // Observables  
    @observable images = [ 
     // ....images 
    ]; 

    @observable carouselleButtons= { 
     next: "fa fa-chevron-right", 
     back: "fa fa-chevron-left" 
    } 
    @observable selectedImageIndex = null; 
    @observable hideCarousel = true; 
    @observable onTransition = false; 

    // Actions 
    selectImage = (index) =>{ 
     this.selectedImageIndex = index; 
    } 

    toggleCarousel =() =>{ 
     this.hideCarousel = !this.hideCarousel; 
    } 

    carouselNext =() => { 
     if(this.selectedImageIndex == this.images.length - 1) { 
      return; 
     } 

     this.onTransition = true; 
     setTimeout(() => { 
      this.selectedImageIndex = this.selectedImageIndex + 1; 
      this.onTransition = false; 
     },500) 
    } 

    carouselPrev =() => { 
     if(this.selectedImageIndex == 0) { 
      console.log('start of the collection');   
      return; 
     } 

     this.onTransition = true; 
     setTimeout(() => { 
      this.selectedImageIndex = this.selectedImageIndex - 1; 
      this.onTransition = false;   
     }, 500)  
    } 

    debounceAction = (fn, wait) => { 
     //lodash's debounce 
     return debounce(fn, wait); 
    } 

carouselButtonコンポーネント - ここで私はデバウンス起動しますimageCarousel.jsx

// React's 
import React from 'react'; 

// Styles 
import CarouselButtonStyle from './carouselButtonStyle'; 

// CarouselButton Component 
export default class CarouselButton extends React.Component { 
    debounce = (e) =>{ 
     const { debounceAction } = this.props; 

     // -----> HERE I CALL DEBOUNCE ! <--------- 
     e.stopPropagation(); 
     debounceAction(this.buttonHandler, 400); 
    } 

    buttonHandler = (e) => { 
     const {limit, index, action, debounceAction} = this.props; 

     if(index == limit) return; 
     else action(); 
    } 

    render(){ 
     const {limit, index, icon, action, debounceAction} = this.props; 

     return(
      <CarouselButtonStyle 
       onClick={(e) => {this.debounce(e)}} 
       className={ index == limit ? 'end-of-collection' : '' } > 

       <i className={icon} aria-hidden="true" /> 
      </CarouselButtonStyle> 
     ); 
    } 
} 

を - carouselButton 親成分：

// React's 
import React from 'react'; 

// Mobx-react's 
import { observer, inject } from 'mobx-react'; 

// Styles 
import ImageCarouselStyle from './imageCarouselStyle'; 

// Components 
import ImgContainer from './imgContainer/imgContainer'; 
import CarouselButton from './carouselButton/carouselButton'; 

// ImageCarousel Component 
@inject('galleryStore') 
@observer 
export default class ImageCarousel extends React.Component { 
    closeCarousel =() => { 
     this.props.galleryStore.toggleCarousel(); 
    } 

    onKeyDown = (e) => { 
     const { keyCode } = e; 

     if(keyCode ===27) this.onEscHandler(); 
     else if (keyCode == 37) this.onLeftArrow(); 
     else if (keyCode == 39) this.onRightArrow(); 
     else return; 
    } 

    onLeftArrow =() => { this.props.galleryStore.carouselPrev() } 

    onRightArrow =() => { this.props.galleryStore.carouselNext() } 

    onEscHandler =() => { this.closeCarousel() } 

    componentDidMount(){ 
     document.addEventListener('keydown', this.onKeyDown, false); 
    } 

    render(){ 
     return(
      <ImageCarouselStyle 
       hidden={this.props.galleryStore.hideCarousel} 
       onClick={this.closeCarousel} > 

       <CarouselButton action={'prev'} 
        icon={this.props.galleryStore.carouselleButtons.back} 
        action={this.props.galleryStore.carouselPrev} 
        limit={0} 
        index={this.props.galleryStore.selectedImageIndex} 
        debounceAction={this.props.galleryStore.debounceAction} /> 

       <ImgContainer 
        images={this.props.galleryStore.images} 
        imgIndex={this.props.galleryStore.selectedImageIndex} 
        onTransition={this.props.galleryStore.onTransition}/> 

       <CarouselButton action={'next'} 
        icon={this.props.galleryStore.carouselleButtons.next} 
        action={this.props.galleryStore.carouselNext} 
        limit={this.props.galleryStore.amountOfImages} 
        index={this.props.galleryStore.selectedImageIndex} 
        debounceAction={this.props.galleryStore.debounceAction} /> 

      </ImageCarouselStyle> 
     ); 
    } 
} 

Answer 1

問題は、CarouselButtonのdebounce方法からdebounceActionを返す必要があるということです。

debounce = (e) =>{ 
    const { debounceAction } = this.props; 

    // -----> HERE I CALL DEBOUNCE ! <--------- 
    e.stopPropagation(); 
    debounceAction(this.buttonHandler, 400); 
// -^^^ must return here 
} 

ただし、今後の混乱を避けるためにさらに進んでください。あなたのコードで複数回書き直して疑わしいメソッド名につなげるのではなく、必要なときにlodashのdebounceを呼び出すだけです。

class Button extends React.Component { 
 
    handleClick = _.debounce((e) => { 
 
    alert('debounced click reaction') 
 
    }, 1000) 
 

 
    render() { 
 
    return <button onClick={this.handleClick}>CLICK ME</button> 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Button />, 
 
    document.getElementById('app') 
 
);

<div id="app"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>