Question

有人可以告诉我为什么我无法在d3.js函数中访问react.state。我真的不知道为什么。

In [1]: def quizresult(quiz_df):
   ...:     maxmarks=10.0
   ...:     noofpresent,lessthanfifty,betweenfiftyandsixty,betweensixtyandseventy,betweenseventyandeighty,greaterthaneighty=0.0,0.0,0.0,0.0,0.0,0.0
   ...:     quiz_result={'noofpresent':None,'lessthan50':None,'between50and60':None,'between60and70':None,'between70and80':None,'greaterthan80':None}
   ...:     for i in range(len(quiz_df)):
   ...:
   ...:         noofpresent=len(quiz_df.index)
   ...:         if(float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)<0.5:
   ...:             lessthanfifty += 1
   ...:         if((float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)>=0.5 and (float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)<0.6):
   ...:             betweenfiftyandsixty += 1
   ...:         if((float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)>=0.6 and (float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)<0.7):
   ...:             betweensixtyandseventy += 1
   ...:         if((float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)>=0.7 and (float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)<0.8):
   ...:             betweenseventyandeighty += 1
   ...:         if(float(quiz_df.loc[i,'Grade/10.00'])/maxmarks)>=0.8:
   ...:             greaterthaneighty += 1
   ...:     quiz_result.update({'noofpresent':noofpresent,'lessthan50':lessthanfifty,'between50and60':betweenfiftyandsixty,'between60and70':betweensixtyandseventy,'between70and80':betweenseventyandeighty,'greaterthan80':greaterthaneighty})
   ...:
   ...:     return quiz_result
   ...:

In [2]: quizresult([])
Out[2]:
{'noofpresent': 0.0,
 'lessthan50': 0.0,
 'between50and60': 0.0,
 'between60and70': 0.0,
 'between70and80': 0.0,
 'greaterthan80': 0.0}

生命周期方法中的第一个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)有效，但是第二个无效。是因为d3不配合反应状态，还是我犯了一个愚蠢的错误？

最诚挚的问候！

Answer 1

如示例所示，您可以尝试返回Promise响应：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)

d3.js + react.js->无法访问状态

1 个答案: