在GoogelChart.jsx上的this.state.data中没有获取数据

时间:2017-10-03 11:20:48

标签: javascript reactjs react-native react-redux

Googlechart.jsx文件:

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { createHashHistory } from 'history';
import { Chart } from 'react-google-charts';
import CsvRead  from '../dynamic/CsvRead'

const customHistory = createHashHistory();


class GoogleChart extends Component {
    constructor(props) {
    super(props);

    this.state = {
      options: {
        title: 'Users Hours comparison',
        hAxis: { title: 'User'},
        vAxis: { title: 'Hours'},
        legend: 'none',
        axisTitlesPosition: 'out',
        'isStacked': true,
        colors: ['#0598d8', '#f97263'],
      },

      data :[]
    };
  }
  onDone(data){
     console.log(this.state.data);
     this.setState({data : data});
  }

  render() {
    console.log(this.state.data);
    return (      
      <div><CsvRead handleFiles={this.onDone.bind(this)}  />
      <Chart
        chartType="ColumnChart"
        data = { this.state.data }
        options={this.state.options}
        graph_id="ColumnChart"
        width="100%"
        height="400px"
        legend_toggle
      />
      </div>
    );
  }
}



function select(state) {
    return {
        users: state.users
    }
}

export default connect(select)(GoogleChart);

ReadCsv.jsx文件:此文件是ParentFile,它返回data.while (self.state.data),但未在GoogleChart.jsx上解析

import React, { Component } from 'react'
import { connect } from 'react-redux'

import ReactFileReader from 'react-file-reader';
var data;
var result = [];

export default class CsvRead extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      homeLink: "manish"
    }

  }

  handleFiles = files => {
    var self = this;

    var reader = new FileReader();
    reader.onload = function(e) {

    var csv = reader.result;
    var lines = csv.split("\n");

    var headers=lines[0].split(",");
    for(var i=1;i<lines.length;i++){
      var obj = {};
      var currentline=lines[i].split(",");
      for(var j=0;j<headers.length;j++){
        obj[headers[j]] = currentline[j];
      }
      result.push(obj);
      }  
      //return result; //JavaScript object
      result= JSON.stringify(result); //JSON
      self.setState({
            data: result
      });
      //console.log(self.state.data);
  }

  reader.readAsText(files[0]);
}
onDone(data){
  this.props.onDone(this.state.data);
}
  render() {

    return (
      <ReactFileReader handleFiles={this.handleFiles.bind(this)} fileTypes={'.csv'}>
        <button className='btn' >Upload</button>
      </ReactFileReader>
    );
  }
}

如何将返回数据解析为GoogleChart.jsx?

0 个答案:

没有答案