微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我如何从console.log获取正确的数据

如何解决我如何从console.log获取正确的数据

我需要帮助从控制台日志中获取数据并进行设置 在前端显示正确的数据 就我而言,它涉及您在图像中看到的数据。 [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 举报,一经查实,本站将立刻删除。