使用React setState

Question

我的问题，我正在尝试利用链接派生的React setState绘制画布数组。经过对画布的一些操作后我重新渲染了一切，它有效，但我遇到了轻微的不一致。我需要用画布“玩”10分钟才能发生这个错误。

应该是：

偶尔会发生什么：

我已尽力而为，我敢肯定我只画了一次。我试图从setState回调调用它，从setTimeout调用setState回调，从setTimeout单独调用等，所有时间bug仍然存在。我知道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 

谢谢！

Answer 1

根据所提供的信息无法给出完美的答案。我说最常见的是人们这样做：

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

建议探索

您可以使用@action装饰器和mobx避免许多这些问题。 I stopped using setState