时间戳

首页 > 解决方案 > this.setState 不是函数，并且 .bind(this) 不是函数

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

问题描述

我遇到的问题是我无法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/

标签： javascriptreactjsthis

解决方案

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

但是，this如果您改为更改为箭头函数，则无需绑定到函数，这样您的函数就不会绑定this到自身，而是会引用Class.

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

推荐阅读