this.forceUpdate.bind(this)报错分析

Posted on
写测试生命周期的Demo的时候，用到了this.forceUpdate，然后为了能响应一个事件的处理，想当然地使用了this.forceUpdate.bind(this)，然而却得到了一个错误。

概述

写测试生命周期的Demo的时候，用到了this.forceUpdate，然后为了能响应一个事件的处理，想当然地使用了this.forceUpdate.bind(this)，然而却得到了一个错误。

问题

假设有组件如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ...
class Comp extends React.Component {
  constructor (props) {
    super(props);
    this.forceUpdate = this.forceUpdate.bind(this);
  }
  render () {
    return (
      <div>
        <button onClick={this.forceUpdate}>Force Update</button>
      </div>
    );
  }
}
//...

上面的写法，将forceUpdate绑定this，直接交给onClick事件，其实这么做也没有什么问题，该强制更新还是强制更新，该重新渲染还是重新渲染，点击按钮以后可以看到需要的效果没有错。

但是控制台还是意外地报了一个错，虽然不影响React正常执行。

解决方法

查看官方文档会发现，this.forceUpdate是可以接收一个函数作为参数的。这样问题就很清楚了，当把点击事件直接交给this.forceUpdate事，事件对象Event会直接传给this.forceUpdate，而forceUpdate在执行之前做了类型检查，发现是事件对象而不是函数，所以报错。

那么解决方法就很明显了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ...
class Comp extends React.Component {
  constructor (props) {
    super(props);
    this.update = this.update.bind(this);
  }
  update() {
    this.forceUpdate();
  }
  render () {
    return (
      <div>
        <button onClick={this.update}>Force Update</button>
      </div>
    );
  }
}
//...

如上，还是老老实实在自定义的函数中调用比较好，而且一般情况下也很少直接给一个按钮，只做响应一个强制更新。