#reactjs #typescript #react-redux #export-to-csv
#reactjs #typescript #react-redux #экспорт в csv
Вопрос:
Я хочу щелкнуть ссылку для загрузки CSV после загрузки данных с сервера. Я перепробовал все подходы из https://github.com/react-csv/react-csv/issues/237
const csvLinkRef = React.useRef<CSVLink amp; HTMLAnchorElement amp; { link?: HTMLAnchorElement }>();
<CSVLink
ref={csvLinkRef}
data={tableDataToDownLoadAsCSV}
/>
Ответ №1:
посмотрите на этот код, это поможет настроить ваш код
export default function dataListPage(props: DataListProps) {
const csvLinkRef = useRef<
CSVLink amp; HTMLAnchorElement amp; { link: HTMLAnchorElement }
>(null); // setup the ref that we'll use for the hidden CsvLink click once we've updated the data
const [data, setData] = useState<dataTypeObj[]>([]);
const hanldeExportButton = async () => {
const data: dataTypeObj[] = await fetchData();
setData(data);
csvLinkRef?.current?.link.click();
};
return (
<CSVLink
data={data}
className="exportButton"
filename="file.csv"
ref={csvLinkRef}
>
</CSVLink>
<Button
color="primary"
variant="contained"
size="small"
startIcon={<GetAppIcon />}
onClick={hanldeExportButton}
>
Export As CSV
</Button>
);
} //func dataListPage end