Question

如何将CsvRead.jsx文件数据调用到GoogleChart.jsx中，以便在React js中准备图表。

GoogleChart.jsx是具有CsvRead.jsx导入语句的父类但无法将CsvRead.jsx中的数据解析为GoogleChart.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReactFileReader from 'react-file-reader';

export default class CsvRead extends React.Component {
  constructor(props) {
    super(props);
  }
  handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    var csv = reader.result;
    var lines = csv.split("\n");
    var result = [];
    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
    console.log(result);
  }
  reader.readAsText(files[0]);
}

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

第二个文件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 : [
    ['User', 'workingHours', 'ExceptedWorkingHours'],
    ['user1', 500, 400],
    ['user2', 300, 200],
    ['user3', 1500, 650],
    ['user4', 1200, 470],
    ['user5', 1000, 700],
    ['user6', 500, 400],
    ['user7', 1300, 500],
    ['user8', 176, 55],
    ['user9', 310, 240],
    ['user10', 500, 400]
]
      // That should contain data from CsvRead.jsx
    };
  }

  render() {
    console.log(this.props);
    return (      
      <div><CsvRead/>
      <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);

我已经添加了所有详细信息让我知道如果你们还需要其他任何东西。任何人都可以帮我这个吗？

Answer 1

尝试以下方法：

https://pastebin.com/0QgZ8E3a

您必须使用回调将结果传输到父对象。

<CsvRead onDone={this.onDone} />

然后在CsvRead类中：

this.props.onDone(result);

Answer 2

据我所知，您正在尝试将interface ApiResponse = { error?: string; property1?: string; } const errorData: ApiResponse = { error: 'error data' }; const okData: ApiResponse = { property1: 'ok data' }; console.log(typeof errorData.error !== 'undefined'); // true console.log(typeof okData.error !== 'undefined'); // false // or even cleaner: console.log(errorData.error); // truthy console.log(okData.error); // falsey console.log(!!errorData.error); // true console.log(!!okData.error); // false中的数据导入<CsvRead>。 IF 那是您尝试做的事情，那么您应该在<GoogleChart>中创建一个功能来接收数据，并在GoogleChart中引用该功能。像这样的东西，

＆＃13;

CsvRead

＆＃13;

如何将数据导入其他类以准备反应js中的图表

2 个答案: