Javascript 使用React setState在画布上绘制

我的问题是，我试图用React-setState绘制画布上的图像数组，这些图像来自链接。在使用canvas进行了一些操作之后，我重新命名了所有内容，它是有效的，但我遇到了一些小的不一致。我需要用canvas“玩”10分钟，让这个bug发生

应该是：

偶尔发生的事情：

我已经尽力了，我肯定我只画过一次。我试着从setState回调调用它，从setTimeout调用它，从setState回调调用它，从setTimeout单独调用它，等等，所有的错误仍然存在。我知道setState的异步特性，但这应该可以正常工作。我很难理解这与canvas api或react 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 

---

谢谢

根据提供的信息，不可能给出完美的答案。也就是说，我发现人们通常会：

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

建议勘探 通过使用

@action

装饰器和mobx，您可以避免这些问题。我停止使用setState