嗨，下面的组件允许用户导入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;
作为state的一部分，您将引用this.state.csvData。此外，在uploadfile方法中的console.log不会显示新值，因为对状态的更新是异步的。