Question

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

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

这是我的课程：

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)，它应该绑定到运行onrendered的匿名函数。

但是，没有必要将this绑定到该函数，如果改为改为使用箭头函数，这样您的函数就不会将this绑定到其自身，而是引用{{1 }}。

Class

this.setState不是函数，.bind（this）不是函数

1 个答案: