Javascript 从本地计算机读取CSV

我试图重写一个函数来读取CSV文件并将其分配给state

一般的工作流程是从本地计算机上载CSV文件，对其进行解析，将其划分为三个不同的对象，并将其分配给状态

但是，我遇到了以下错误：

TypeError:无法读取未定义的属性“readable”

而基于类的组件可以工作

我想用钩子重写它，因为我想使用全局状态，并且能够在其他组件中访问该信息

我做错了什么

这是我的功能组件：

import React, { useState } from "react";
import Papa from "papaparse";
import _ from "lodash";

const Upload = () => {
  const [state, setState] = useState({
    csvfile: null,
    tShirts: [null],
    felpe: [null]
  });

  function handleChange(event) {
    setState({
      csvfile: event.target.files[0]
    });
  }

  function importCSV(e) {
    e.preventDefault();
    const { csvfile } = state;

    Papa.parse(csvfile, {
      complete: updateData,
      header: true
    });
  }

  function updateData(result) {
    var data = result.data;

    var tshirts = _.map(data, function(o) {
      if (_.includes(o.stampa, "T-Shirt")) return o;
    });
    tshirts = _.without(tshirts, undefined);

    var felpe = _.map(data, function(obj) {
      if (_.includes(obj.stampa, "Felpa")) return obj;
    });

    felpe = _.without(felpe, undefined);

    setState({ tShirts: tshirts, felpe: felpe });
  }

  return (
    <div>
      <div className="upload">
        <p>Carica gli ordini</p>
        <input
          className="upload-input"
          type="file"
          name="file"
          placeholder={null}
          onChange={handleChange}
        />
        <p />
        <button onClick={importCSV}>Upload</button>
      </div>
    </div>
  );
};

export default Upload;

import React from "react";
import Papa from "papaparse";
import _ from "lodash";

import TableData from "./TableData";

class Upload extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile: null,
      tShirts: [null],
      felpe: [null]
    };
    this.updateData = this.updateData.bind(this);
  }

  handleChange = event => {
    this.setState({
      csvfile: event.target.files[0]
    });
  };

  importCSV = e => {
    e.preventDefault();
    const { csvfile } = this.state;
    Papa.parse(csvfile, {
      complete: this.updateData,
      header: true
    });
  };

  updateData(result) {
    var data = result.data;

    var tshirts = _.map(data, function(o) {
      if (_.includes(o.stampa, "T-Shirt")) return o;
    });
    tshirts = _.without(tshirts, undefined);

    var felpe = _.map(data, function(obj) {
      if (_.includes(obj.stampa, "Felpa")) return obj;
    });

    felpe = _.without(felpe, undefined);

    this.setState({ tShirts: tshirts, felpe: felpe });
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div className="upload">
          <p>Carica gli ordini</p>
          <input
            className="upload-input"
            type="file"
            ref={input => {
              this.filesInput = input;
            }}
            name="file"
            placeholder={null}
            onChange={this.handleChange}
          />
          <p />
          <button onClick={this.importCSV}>Upload</button>
        </div>
      </div>
    );
  }
}

export default Upload;

import React，{useState}来自“React”；
从“papaparse”导入Papa；
从“洛达斯”进口；
常量上传=（）=>{
常量[状态，设置状态]=使用状态({
csvfile:null，
T恤：[null]，
费尔普：[null]
});
函数句柄更改（事件）{
设定状态({
csvfile:event.target.files[0]
});
}
函数导入SV（e）{
e、 预防默认值（）；
const{csvfile}=状态；
Papa.parse（csvfile{
完成：更新数据，
标题：true
});
}
函数更新数据（结果）{
var数据=结果数据；
var tshirts=u3;.map（数据，函数（o）{
如果（uu.包括（o.stampa，“T恤”））返回o；
});
tshirts=无（tshirts，未定义）；
var felpe=u3;.map（数据、函数（obj）{
如果（包括（obj.stampa，“Felpa”））返回obj；
});
felpe=u2;无（felpe，未定义）；
setState（{tShirts:tShirts，felpe:felpe}）；
}
返回(
加勒比大羚羊


上传
);
};
导出默认上传；

这里是基于类的组件：

import React, { useState } from "react";
import Papa from "papaparse";
import _ from "lodash";

const Upload = () => {
  const [state, setState] = useState({
    csvfile: null,
    tShirts: [null],
    felpe: [null]
  });

  function handleChange(event) {
    setState({
      csvfile: event.target.files[0]
    });
  }

  function importCSV(e) {
    e.preventDefault();
    const { csvfile } = state;

    Papa.parse(csvfile, {
      complete: updateData,
      header: true
    });
  }

  function updateData(result) {
    var data = result.data;

    var tshirts = _.map(data, function(o) {
      if (_.includes(o.stampa, "T-Shirt")) return o;
    });
    tshirts = _.without(tshirts, undefined);

    var felpe = _.map(data, function(obj) {
      if (_.includes(obj.stampa, "Felpa")) return obj;
    });

    felpe = _.without(felpe, undefined);

    setState({ tShirts: tshirts, felpe: felpe });
  }

  return (
    <div>
      <div className="upload">
        <p>Carica gli ordini</p>
        <input
          className="upload-input"
          type="file"
          name="file"
          placeholder={null}
          onChange={handleChange}
        />
        <p />
        <button onClick={importCSV}>Upload</button>
      </div>
    </div>
  );
};

export default Upload;

import React from "react";
import Papa from "papaparse";
import _ from "lodash";

import TableData from "./TableData";

class Upload extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile: null,
      tShirts: [null],
      felpe: [null]
    };
    this.updateData = this.updateData.bind(this);
  }

  handleChange = event => {
    this.setState({
      csvfile: event.target.files[0]
    });
  };

  importCSV = e => {
    e.preventDefault();
    const { csvfile } = this.state;
    Papa.parse(csvfile, {
      complete: this.updateData,
      header: true
    });
  };

  updateData(result) {
    var data = result.data;

    var tshirts = _.map(data, function(o) {
      if (_.includes(o.stampa, "T-Shirt")) return o;
    });
    tshirts = _.without(tshirts, undefined);

    var felpe = _.map(data, function(obj) {
      if (_.includes(obj.stampa, "Felpa")) return obj;
    });

    felpe = _.without(felpe, undefined);

    this.setState({ tShirts: tshirts, felpe: felpe });
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div className="upload">
          <p>Carica gli ordini</p>
          <input
            className="upload-input"
            type="file"
            ref={input => {
              this.filesInput = input;
            }}
            name="file"
            placeholder={null}
            onChange={this.handleChange}
          />
          <p />
          <button onClick={this.importCSV}>Upload</button>
        </div>
      </div>
    );
  }
}

export default Upload;

从“React”导入React；
从“papaparse”导入Papa；
从“洛达斯”进口；
从“/TableData”导入TableData；
类上载扩展了React.Component{
构造函数（）{
超级（）；
此.state={
csvfile:null，
T恤：[null]，
费尔普：[null]
};
this.updateData=this.updateData.bind（this）；
}
handleChange=事件=>{
这是我的国家({
csvfile:event.target.files[0]
});
};
importCSV=e=>{
e、 预防默认值（）；
const{csvfile}=this.state；
Papa.parse（csvfile{
完成：this.updateData，
标题：true
});
};
更新数据（结果）{
var数据=结果数据；
var tshirts=u3;.map（数据，函数（o）{
如果（uu.包括（o.stampa，“T恤”））返回o；
});
tshirts=无（tshirts，未定义）；
var felpe=u3;.map（数据、函数（obj）{
如果（包括（obj.stampa，“Felpa”））返回obj；
});
felpe=u2;无（felpe，未定义）；
this.setState（{tShirts:tShirts，felpe:felpe}）；
}
render（）{
console.log（this.state）；
返回(
加勒比大羚羊

{
this.filesInput=输入；
}}
name=“文件”
占位符={null}
onChange={this.handleChange}
/>

上传
);
}
}
导出默认上传；

它没有附带挂钩。它每次都能完美地工作。完成后，您必须再次停止导入

请勾选：

//更新方法：

function importCSV(e) {
    e.preventDefault();
    const { csvfile } = state;

    csvfile &&
      Papa.parse(csvfile, {
        header: true,
        dynamicTyping: true,
        complete: updateData
      });
  }

//

您可以相应地更新/重构

import React, { useState } from "react";
import Papa from "papaparse";
import _ from "lodash";

const Upload = () => {
  const [state, setState] = useState({
    csvfile: null,
    tShirts: [null],
    felpe: [null]
  });

  function handleChange(event) {
    setState({
      csvfile: event.target.files[0]
    });
  }

  function importCSV(e) {
    e.preventDefault();
    const { csvfile } = state;

    csvfile &&
      Papa.parse(csvfile, {
        header: true,
        dynamicTyping: true,
        complete: updateData
      });
  }

  function updateData(result) {
    setState({
      csvfile: null
    });
    var data = result.data;
    console.log(data);
    var tshirts = _.map(data, function(o) {
      if (_.includes(o.stampa, "T-Shirt")) return o;
    });
    tshirts = _.without(tshirts, undefined);

    var felpe = _.map(data, function(obj) {
      if (_.includes(obj.stampa, "Felpa")) return obj;
    });

    felpe = _.without(felpe, undefined);

    setState({ tShirts: tshirts, felpe: felpe });
  }

  return (
    <div>
      <div className="upload">
        <p>Carica gli ordini</p>
        <input
          className="upload-input"
          type="file"
          name="file"
          placeholder={null}
          onChange={handleChange}
        />
        <p />
        <button onClick={importCSV}>Upload</button>
      </div>
    </div>
  );
};

export default Upload;

import React，{useState}来自“React”；
从“papaparse”导入Papa；
从“洛达斯”进口；
常量上传=（）=>{
常量[状态，设置状态]=使用状态({
csvfile:null，
T恤：[null]，
费尔普：[null]
});
函数句柄更改（事件）{
设定状态({
csvfile:event.target.files[0]
});
}
函数导入SV（e）{
e、 预防默认值（）；
const{csvfile}=状态；
CSV文件&&
Papa.parse（csvfile{
标题：对，
动态打字：对，
完成：更新数据
});
}
函数更新数据（结果）{
设定状态({
csvfile:null
});
var数据=结果数据；
控制台日志（数据）；
var tshirts=u3;.map（数据，函数（o）{
如果（uu.包括（o.stampa，“T恤”））返回o；
});
tshirts=无（tshirts，未定义）；
var felpe=u3;.map（数据、函数（obj）{
如果（包括（obj.stampa，“Felpa”））返回obj；
});
felpe=u2;无（felpe，未定义）；
setState（{tShirts:tShirts，felpe:felpe}）；
}
返回(
加勒比大羚羊


上传
);
};
导出默认上传；

这是哪一行崩溃的？我实际上没有得到一行，但我认为问题可能是因为：

ref={input=>{this.filesInput=input；}}}

谢谢，但是我希望它是一个功能组件，而不是类组件。它不是类组件。。你在说什么？？我只是用你的例子，确切地说，我已经有了一个基于工作类的组件，但是我想用钩子把它转换成一个功能组件，这就是问题所在