时间戳

首页 > 解决方案 > 数组以 Excel React

reactjs - 数组以 Excel React

问题描述

我对此有点陌生，我正在尝试将我的数据数组传递给 excel，但到目前为止对我没有任何作用

我有一个例子

import {ExcelFile, ExcelSheet} from "react-export-excel";

const [listSelectNewTable, setListSelectNewTable] = useState([])

const DataExcel = [
{
columns: [
  { value: "Clave Cliente", widthPx: 50 }, 
  { value: "Nobre Cliente", widthCh: 20, widthCh: 20  }, 
  { value: "Clave Articulo", widthPx: 60}, 
  { value: "Nombre Cliente", widthPx: 60}, 
  { value: "Clave Unidad", widthPx: 60},
  { value: "Precio", widthPx: 60}, 
],
data: [listSelectNewTable],
}
];

class Download extends React.Component {
render() {
    return (
        <ExcelFile>
            <ExcelSheet dataSet={DataExcel} name="Price"/>
        </ExcelFile>
    );
}

有人可以告诉我我做错了什么吗？

标签： reactjs

解决方案

在我们开始之前：

很明显，如果您不将任何数据传递给dataSet：

const [listSelectNewTable, setListSelectNewTable] = useState([])

// listSelectNewTable = []

您还试图在useState组件之外调用，然后继续使用组件。没有听起来居高临下的意思，你真的应该研究何时使用生命周期方法以及何时使用钩子（提示：它是一个或另一个），因为它超出了这个问题/答案的范围，但是你的代码如果您不花时间至少了解基础知识，那将永远无法工作。class

我的回答的其余部分假设你至少解决了这个问题。

问题：

此外，即使它有任何数据，也会导致错误，因为您的数据输入错误：

dataSet道具type定义为：

dataSet: Array<ExcelSheetData>

考虑以下包类型定义：

interface ExcelSheetData {
    xSteps?: number;
    ySteps?: number;
    columns: Array<string>;
    data: Array<ExcelCellData>;
}

type ExcelCellData = ExcelValue | ExcelCell;
type ExcelValue = string | number | Date | boolean;

interface ExcelCell {
    value: ExcelCell;
    // [Note]: this is actually incorrectly typed in the package itself.
    // Should be value: ExcelCellValue instead
    style: ExcelStyle;
}

本质上，如果您启用了（顺便说一句，我建议您这样做），您会看到您正在尝试将不正确的数据类型传递给dataSet属性。

  • 你应该传递给dataSetprop 的是 
     Array<ExcellCellData>
 // expecting: Array<ExcelValue | ExcelCell> (eg. ['A', 22])
  • 你实际上传递给dataSetprop 的是 
     Array<Array<never>>
 // received: [[]]
 // [] = Array<never>

如您所见，Array<Array<>>将它包装了两次，这意味着您在那里传递了一个不必要的包装数组。

解决方案：

现在我们知道了原因，让我们修复它：

const DataExcel = [
 {
  columns: [
    { value: "Clave Cliente", widthPx: 50 }, 
    { value: "Nobre Cliente", widthCh: 20, widthCh: 20  }, 
    { value: "Clave Articulo", widthPx: 60}, 
    { value: "Nombre Cliente", widthPx: 60}, 
    { value: "Clave Unidad", widthPx: 60},
    { value: "Precio", widthPx: 60}, 
  ],
  data: listSelectNewTable, // previously was [listSelectNewTable]
  // Note we removed the extra wrapping nested array [] ˆ
 },
];

现在您正在正确地传递数据 - 但显然，除非您传递任何实际数据而不是空数组，否则 Excel 工作表中不会有任何内容来阻止列。

最后说明（不需要回答）：

另外一般来说，我建议在他们的 github 页面上使用具有更高星级的包（这个有 65 星），并且只是现有包的一个分支，特别是对于更复杂的东西，比如 excel 导出。虽然有时原石中确实隐藏着钻石，但大多数时候星星是包装质量的良好指标。

在第一次随机浏览包后，我在自己的答案中发现了一个打字错误，这让我担心其中实际上还有多少其他错误，除非你知道并相信作者，或者它是一个非常适合小众市场的包事物。

因为递归

 interface ExcelCell {
   value: ExcelCell; // should be ExcelCellValue
   style: ExcelStyle;
 }

毫无意义，只需要您无限递归地声明对象接口定义

推荐阅读