Question

我已经在react中创建了文件上传组件，该组件将上传csv文件并解析并将其呈现为客户端上的json。但是现在我的代码只能将csv文件上传到控制台日志中，而且我很难理解为什么它不解析csv并在浏览器（客户端）上呈现它。

我查看了React教程视频，但仍然不知道如何解析csv并将其作为json输出在客户端上呈现。我怎样才能做到这一点？任何黑客可以做到这一点？有什么想法吗？谢谢

我的文件组件：

import React, { Component } from 'react'
// import { connect } from 'react-redux'
import ReactFileReader from 'react-file-reader';

export default class FileUpload extends Component {
//   constructor(props) {
//     super(props);
//   }
  // how to post those to database
  constructor(props) {
    super(props)
    this.state = {
      fileUpload_status: 'false'
    }
  };
  handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    // Use reader.result
    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);
      }  
      result= JSON.stringify(result, null, 4); //JSON
    console.log(result);
  }
  reader.readAsText(files[0]);
  // format json as standard json object
}
  render() {
    return (
      <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
        <button className='btn'>Upload</button>
        <div>{console.log(this.props)}</div>
      </ReactFileReader>
    );
  }
}

我遇到了这个问题，因为无论何时上传csv文件，我都希望将此数据填充到云数据库中。我无法解决这个问题。社区反应可以帮助我解决我的问题吗？是否有解决此问题的技巧？有什么解决办法吗？

目标：

我希望将本地csv文件解析为json，并在浏览器（客户端）上呈现内容。我如何实现我的目标？任何解决方案可以做到这一点？谢谢

Answer 1

使用pre和JSON.stringify()

 this.setState({
    data: JSON.stringify(result, null, 4),
  });

呈现您的JSON字符串

 <pre>{this.state.data}</pre>

demo

在响应中在客户端上渲染json

1 个答案: