在畫布上繪製與反應setState

Question

我的問題，我試圖繪製圖像陣列的圖像與反應setState，從鏈接派生。經過一些操作與畫布我放棄一切，它的作品，但我遇到輕微的不一致。我需要用畫布「玩」10分鐘以讓這個錯誤發生。

應該是：

什麼偶爾發生的情況：

我用盡了一切我可以，我敢肯定，我畫他們只有一次。我試圖從setState回調，從setTimeout它setState回調，從setTimeout分開等調用它，所有的時間錯誤仍然存​​在。我知道setState的異步性質，但這應該工作正常。我很難理解這是與canvas 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(); 

建議探索

cn的，您使用@action裝飾和mobx避免了許多這些問題。 I stopped using setState