在画布上绘制与反应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