使用reactjs从Excel文件获取数据并且数据不显示

编程问答 2022-06-22

问题描述

我已经运行了我的项目，在这里我将使用reactjs从excel文件中获取数据，并且在编译时不会发生错误，并且数据也不会显示在表格中。我将搜索此问题，然后发现问题出在道具中。因此，请描述代码中的问题以及如何在此过程中使用道具。

在这里，我的代码是我使用excel函数的地方，还是在props中，我使用了map函数来显示表数据。

import React,{useState} from 'react'
import * as XLSX from 'xlsx'
import Accordion from './component/accordion'

function App() {
 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((d)=>{
  setItems(d);
 });
};

return(
  <div>
    <Accordion
      content={
        <div>
          <input type="file" onChange={(e) =>{
          const file=e.target.files[0];
           readExcel(file);
          }} />
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Article No</th>
                <th scope="col">Product Name</th>
                <th scope="col">Quantity</th>
                <th scope="col">Price</th>
                <th scope="col">Total Amount</th>
             </tr>
           </thead>
           <tbody>
             {items.map((d) => (
               <tr key={d.ArticleNo}>
                 <td>{d.ArticleNo}</td>
                 <td>{d.ProductName}</td>
                 <td>{d.Quantity}</td>
                 <td>{d.Price}</td>
                 <td>{d.TotalAmount}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
     }
   />
  </div>
 );
}
export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

excelexcelreactjsreactjsreactjsreactjssheetjs