javascript - this.setState 不是函数，.bind(this) 也不是函数

Question

我遇到的问题是我无法调用 this.setState在外部库方法的回调内部，我也无法绑定(bind)到该方法。

我正在使用一个名为 html2canvas 的库，并且我需要访问我正在使用其中一种方法的类的状态。

这是我的类(class):

class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {

          var base64image = canvas.toDataURL("image/png");
          document.body.appendChild(canvas);
          this.setState({canvas: canvas} );
        },
        width:320,
        height:220
    }).bind(this);
  }
}

这会返回以下错误:

Inline Babel script:23 Uncaught TypeError: html2canvas(...).bind is not a function
    at Hello.componentDidMount (<anonymous>:22:8)
    at commitLifeCycles (react-dom.development.js:17469)
    at commitAllLifeCycles (react-dom.development.js:18871)
    at HTMLUnknownElement.callCallback (react-dom.development.js:143)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19083)
    at react-dom.development.js:20553
    at unstable_runWithPriority (react.development.js:735)
    at completeRoot (react-dom.development.js:20552)

位于 .bind(this)打电话。

Inline Babel script:19 Uncaught TypeError: this.setState is not a function
    at Object.onrendered (<anonymous>:18:14)
    at Object.o.complete (html2canvas.min.js:8)
    at o (html2canvas.min.js:7)
    at Object.u.Preload (html2canvas.min.js:7)
    at html2canvas.min.js:8

您可以在此处查看 JSFiddle 上的示例:https://jsfiddle.net/michael_t/6q34ofws/125/

Answer 1

第一个问题是您在错误的位置使用了 .bind(this)，它应该绑定(bind)到运行 onrendered 的匿名函数。

但是，如果您改为箭头函数，则无需将 this 绑定(bind)到函数，这样您的函数就不会将 this 绑定(bind)到自身，而是将请参阅类。

html2canvas(document.getElementById("target"), {
     onrendered: (canvas) => {
          ...
          this.setState({canvas: canvas} );
        },
     ...
})