React setState 在变量初始化之前一直运行答案

【问题标题】：React setState keeps running before variable is initialisedReact setState 在变量初始化之前一直运行
【发布时间】：2020-04-25 04:08:42
【问题描述】：

我有一个与更新状态的按钮单击相关的功能。这个处于状态的 src 元素链接到一个 img 组件。但是，我必须单击此按钮两次才能显示图像。我相信这是因为 setState 在 setimg 变量完全加载之前正在运行。

runThis(){
    var c = document.createElement("canvas")
    c.width = "450";
    c.height = "394"
    var ctx = c.getContext("2d")
    var newimg = document.createElement("img")
    newimg.src = this.props.location.url
    ctx.drawImage(newimg,10,10)
    var setimg = c.toDataURL("image/png")
    this.setState({
        src:setimg
    })
}

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

您在图像完成加载之前设置状态。这可能会导致问题。当图像加载完成时，在图像和 setState 上应用 onload 事件监听器。

runThis(){
    var newimg = document.createElement("img")
    newimg.onload = this.imageLoaded
    newimg.src = this.props.location.url
}

imageLoaded(e){
    var c = document.createElement("canvas")
    c.width = "450";
    c.height = "394"
    var ctx = c.getContext("2d")
    ctx.drawImage(e.target,10,10)
    this.setState({
          src:c.toDataURL("image/png")
     })
}

如果没有帮助请告诉我。

【讨论】：

完美运行，谢谢！ src:this.c.toDataURL("image/png") 也应该是 src:c.toDataURL("image/png")，因为它是一个局部变量
不客气。乐意效劳。我已按照您的建议进行了适当的更改。
所以对于我的图像，它由 4 个其他图像组成。对于台式机，它可以很好地加载图像，但对于移动设备，它首先加载的图像只有 2 个其他图像，然后我再次按下按钮，它会一个一个地加载其他图像。所以它需要3个按钮点击。知道为什么这可能会专门针对移动设备发生吗？
每次点击都会触发一些重新渲染，从而导致状态同步。不看完整的代码很难说。你能创建一个沙盒吗？

【解决方案2】：

如果问题确实只是它在上下文之前运行，您可以将setState 转换为回调函数

   runThis({callback}){
      var c = document.createElement("canvas")
      c.width = "450";
      c.height = "394"
      var ctx = c.getContext("2d")
     var newimg = document.createElement("img")
     newimg.src = this.props.location.url
     ctx.drawImage(newimg,10,10)
     var setimg = c.toDataURL("image/png")
    callback(setimg)
    }

    //usage
    this.runThis({param=>this.setState({ src: param })})

【讨论】：