React中调用D3.js函数无法访问state的问题求助

嘿，这个问题其实和D3与React的兼容性无关，核心是JavaScript中this的指向问题，咱们来拆解一下：

问题根源 #

你在Promise.all().then()里用了普通的function作为回调，在React的严格模式下（默认开启），这种回调函数里的this并不会指向组件实例，而是undefined，所以自然无法读取this.state。而componentDidMount是组件的生命周期方法，它的this默认就绑定到组件实例上，所以能正常访问state。

另外注意你constructor里的一个笔误：

this.drawTreeMap = this.drawTreeMap.bin(this)

这里应该是bind而不是bin，否则会报错找不到bin方法，导致drawTreeMap无法正常调用。修正为：

this.drawTreeMap = this.drawTreeMap.bind(this)

三种解决方案 #

1. 使用箭头函数（最推荐）

箭头函数会继承外层作用域的this，也就是组件实例，直接替换回调函数即可：

drawTreeMap() {
  Promise.all([
    d3.json("https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json"),
    d3.json("https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json"),
    d3.json("https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json")
  ])
  .then((data) => { // 这里改成箭头函数
    let kickstarter = data[0];
    let movie = data[1];
    let videoGamesSaleData = data[2];
    console.log(this.state.test) // 现在可以正常访问了
  })
}

2. 提前保存组件的this

在Promise.all之前，把组件实例的this存到一个变量里，比如self，然后在回调里用这个变量访问state：

drawTreeMap() {
  const self = this; // 保存组件的this
  Promise.all([
    // ... 数据源
  ])
  .then(function(data) {
    let kickstarter = data[0];
    let movie = data[1];
    let videoGamesSaleData = data[2];
    console.log(self.state.test) // 用self访问组件state
  })
}

3. 给回调函数绑定this

通过bind()方法把回调函数的this绑定到组件实例上：

drawTreeMap() {
  Promise.all([
    // ... 数据源
  ])
  .then(function(data) {
    let kickstarter = data[0];
    let movie = data[1];
    let videoGamesSaleData = data[2];
    console.log(this.state.test)
  }.bind(this)) // 绑定组件的this
}

总结 #

这个问题完全是JavaScript的this绑定机制导致的，和D3、React本身没有冲突，只要确保回调函数里的this指向组件实例，就能正常访问state啦。

内容的提问来源于stack exchange，提问作者c0mmand0r