将文件 csv 上传到表 react.js

Question

您好，下面的组件允许用户导入 csv 文件并将其显示在 CsvToHtmlTable 上，下面的代码允许用户选择 csv 文件，然后将其插入 csvData 变量中，但是，我必须在这段代码中确保它显示在表格中，但是文件上传时表格仍然是空的，我该怎么办？

React.js 代码：

import React from "react";
import {
  Row,
  Col,
  Button,
  UncontrolledButtonDropdown,
  DropdownMenu,
  DropdownToggle,
} from "reactstrap";
import Widget from "../../components/Widget";
import s from "./Static.module.scss";
import { toast } from "react-toastify";
import { v4 as uuid } from "uuid";
import { CsvToHtmlTable } from 'react-csv-to-table';

class ImportazioneBolleView extends React.Component {

  
  constructor(props) {
    super(props);

    this.textInput = React.createRef();

    this.state = {
      fileName:'',
      fileContent: '',
      tableStyles: [],
      input: "",
      csvData: null,
    };

    
  }

  errornotification = (Message) => {
    let id = uuid();
    toast.error(
      <div>
        {Message}
        <br />
      </div>,
      { ...this.state.options, toastId: id }
    );
  };

  notificalocal = () => toast.success("Cliente inserito con successo!", this.state.options);

  

  getImgSrc = (level) =>
    this.state.windLevels.find((w) => w.value === level).img;

  uploadfile = (e) =>
  {  let reader = new FileReader();
    reader.onload = () => {
      
      this.setState({
        csvData: reader.result
      })
    
    }
  }

  render() {
    return (
      <div className={s.root}>
        {" "}
        <h2 className="page-title">
          {" "}
          Importazione Bolle - <span className="fw-semi-bold">
            {" "}
            Amministrazione{" "}
          </span>{" "}
        </h2>{" "}
        <Row>
          {" "}
          <Col>
            {" "}
            <Widget settings close bodyClass={s.mainTableWidget}>
              {" "}
              <p> </p> <p> </p> <p> </p> <p> </p>{" "}
             
              <CsvToHtmlTable data={  this.state.csvData} csvDelimiter="," tableClassName="table table-striped table-hover"/>
              <div className="clearfix">
                {" "}
                <div className="float-right">
                  {" "}
                  <Button color="success" className="mr-xs" size="sm">
                    {" "}
                    Back{" "}
                  </Button>{" "}
                  <UncontrolledButtonDropdown>
                    {" "}
                    <DropdownToggle
                      color="warning"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      {" "}
                      Importa COMET{" "}
                    </DropdownToggle>{" "}
                     <DropdownMenu>
                      <div align="center">
                        <input type="file"  onChange={this.uploadfile}/>
                      </div>
                    </DropdownMenu>{" "}
                  </UncontrolledButtonDropdown>{" "}
                  <UncontrolledButtonDropdown>
                    {" "}
                    <DropdownToggle
                      color="danger"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      {" "}
                      Importa Sonepar{" "}
                    </DropdownToggle>{" "}
                     <DropdownMenu>
                      <div align="center">
                        <input type="file"  onChange={this.uploadfile}/>
                      </div>
                    </DropdownMenu>{" "}
                  </UncontrolledButtonDropdown>{" "}
                </div>{" "}
                
                <p> </p>{" "}
              </div>{" "}
            </Widget>{" "}
          </Col>{" "}
        </Row>{" "}
      </div>
    );
  }
}

export default ImportazioneBolleView;

Answer 1

作为state 的一部分，您将引用this.state.csvData。此外，您的 console.log 在您的 uploadfile 方法中不会显示您的新值，因为状态更新是异步的。