キャンバスでリアクションsetStateを使って描画する

Question

私の問題は、リンクから派生したリアクションsetStateで画像のキャンバス配列に描画しようとしています。キャンバスでいくつかの操作をした後、私はすべてを再レンダリングしますが、動作しますが、私は少し不一致に遭遇します。このバグを起こさせるためには、キャンバスで10分ほど "遊ぶ"必要があります。

は次のようになります。

時折何が起こる：

私は私ができることはすべて試した、私は一度だけそれらを描いてると確信しています。私はsetStateコールバック、setTimeoutからsetStateコールバック、別々にsetTimeoutからコールしようとしましたが、常にバグは残っています。私はsetStateの非同期性を認識していますが、これは正常に動作するはずです。キャンバスAPIやリアクションAPIに関連するのはわかりにくいです。追加情報が必要な場合はお知らせください！関連コード：

export let mapImage=curry((
    ctx:CanvasRenderingContext2D, 
    link:string, 
    width:number, 
    location:Vertex 
)=>{ 
    let img=new Image(); 
    let place=location; 
    img.src=link;  
    img.onload=()=>{ 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.arc(
      place.x+width/2, 
      place.y+width/2, 
      width/2, 
      0, 
      Math.PI*2,true 
     ); 
     ctx.closePath(); 
     ctx.clip(); 
     ctx.drawImage( 
      img, 
      place.x, 
      place.y, 
      width, 
      width 
     );   
     ctx.restore(); 
    }; 
});  

On event: 
     this.setState({down_delay:0, 
         mouse_down:false},()=>{this.drawCard()}); 

In drawCard: 
     this.context.clearRect(0,0,this.props.width,this.props.height); 
     map(mapImage,this.props.vertices) 

...rest of the code 

ありがとう！

Answer 1

提供された情報に基づいて完全な回答をすることはできません。それは言った最も一般的に私は、人々が何を見つける：

this.setState({down_delay:0, 
        mouse_down:false},()=>{this.drawCard()}); 
    moreCodeWithoutRealizingItWillRunBeforeDrawCard(); 

あなたは@actionデコレータとmobxを使用することにより、これらの問題の数を避けるためにcn探査

を推奨します。 I stopped using setState