问题描述
我需要帮助从控制台日志中获取数据并进行设置 在前端显示正确的数据 就我而言,它涉及您在图像中看到的数据。 [cosole.log] 我只是不知道为什么它对我不起作用。 [1]:https://i.stack.imgur.com/wwd3M.png 我的代码如下:
import React,{
useState
} from "react";
import "./Upload.css";
import * as XLSX from "xlsx";
function Uploadscherm() {
const [items,setItems] = useState([]);
const readExcel = (file) => {
const promise = new Promise((resolve,reject) => {
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e) => {
const bufferArray = e.target.result;
const wb = XLSX.read(bufferArray,{
type: 'buffer'
});
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws)
resolve(data);
};
fileReader.onerror = ((error) => {
reject(error);
})
});
promise.then((data) => {
console.log(data)
setItems(data);
})
};
return (
<div>
<input type="file" onChange={(e)=>{ const file = e.target.files[0]; readExcel(file); }} /> {
<div className="productImportTableContainer">
<table className="productImportTable">
<thead>
<tr>
<th scope="col">Omschrijving product</th>
<th scope="col">Soortproduct</th>
<th scope="col">Productgroep</th>
<th scope="col">Inkoopvolume</th>
</tr>
</thead>
<tbody>
{items.map((data) => (
<tr key={data.Item}>
<td>{data.Omschrijvingproduct}</td>
<td>{data.soortproduct}</td>
<td>{data.Productgroep}</td>
<td>{data.Inkoopvolume}</td>
</tr>
))}
</tbody>
</table>
</div>
}
</div> );
}
export default Uploadscherm
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)