何かに取り組んでいると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>
);
}
}
失敗はあなたが何を経験しているされています。ここでは
を使用すると、クリックハンドラをラップすることができる方法の最も基本的な例でありますか?コンソールエラーはありますか? –
@RobertFarleyエラーは発生しません。私はデバウンスに渡す関数が呼び出されないと思う。多分私はそれを正しく書いていないでしょうか? – ueeieiie
私はReactとmobxについてはわかりませんが、lodashのデバウンスは関数を作成して返します。したがって、debounceAction()はこの関数を返し、( "ここで私はデバッグします!")debounceAction()の戻り値は誰も実際にその関数を呼び出すことはありません。これは 'debounceAction(this.buttonHandler、400)();'と呼ばれますが、あなたはデバウンスを間違って使用しています。あなたの実装のようにdebounce()を何度も呼び出すことはできません。 debounce()を一度だけ呼び出してから、再度debounce()の_result_を呼び出す必要があります。 –