d3. js + реагировать. js -> не могу получить доступ к состоянию

Question

Может кто-нибудь сказать мне, почему я не могу получить доступ к реагирующему состоянию в моей функции d3. js. Я действительно не могу понять, почему.

import React, { Component } from 'react'
import * as d3 from 'd3';

class Treemap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      test: 1
    }
this.drawTreeMap = this.drawTreeMap.bin(this)
  }

  componentDidMount() {
    this.drawTreeMap();
    console.log(this.state.test) // works fine
  }

  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(function(data) {
      let kickstarter = data[0];
      let movie = data[1];
      let videoGamesSaleData = data[2];

      console.log(this.state.test)  // does not work (Unhandled Rejection (TypeError): Cannot read property 'state' of undefined)

Первый console.log(this.state.test) в методе жизненного цикла работает, но второй не работает. Это из-за того, что d3 не взаимодействует с состоянием реакции или я совершил глупую ошибку sh?

С уважением !!!

Answer 1

Можете ли вы попытаться вернуть ответ Обещания, как показано на примере: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

let promis = 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(function(data) {
      return data;
    });

console.log(promis[0]);
console.log(this.state.test)