从路径下载文件

Question

我正在尝试在 React 前端创建一个下载链接，用户将在其中单击一个按钮并下载一个文件。

To acheive this, I am trying to pass the file path inside a JS function and inside the function I want to call an API endpoint with that path, and the api will return me the file.

现在，由于某种原因，我正在编写的代码不起作用。 请帮助我纠正我的错误。

 import React, { useState, useEffect } from "react"; import axios from "axios"; import moment from "moment"; import { Grid, Paper, Typography, Table, TableCell, TableContainer, TableHead, TableRow, TableBody, } from "@mui/material"; import Download from './Download'; import FileDownload from "js-file-download"; export default function Classroomtest() { const uid = localStorage.getItem("uniqueid"); const [assignments, setassignments] = useState(""); useEffect(() => { axios.get(`http://localhost:5000/api/v1/app/get-my-assignments/${uid}`).then((res) => { setassignments(res.data); }); }, []); const view = (path) =>{ //Nothing is coming here } return ( <Grid> <Paper sx={{ padding: 3, margin: 1, }} > <TableContainer component={Paper} sx={{ margin: "10px", width: "97%", }} > <Table sx={{ minWidth: 100 }} aria-label="simple table"> <TableHead> <TableRow> <TableCell align="right">Topic</TableCell> <TableCell align="right">Due</TableCell> <TableCell align="right">Action</TableCell> <TableCell align="right">Delete</TableCell> </TableRow> </TableHead> {assignments?.data?.myassignments.map((item) => ( <TableBody key={item._id}> <TableCell align="right">{item.assignmentname}</TableCell> <TableCell align="right">{moment.utc(item.duedate).format("MMMM,DD")}</TableCell> <TableCell align="right"> <button type="button" onClick={view(item.assignmentfilepath)}>Download</button> </TableCell> <TableCell align="right">Java</TableCell> </TableBody> ))} </Table> </TableContainer> </Paper> </Grid> ); }

返回的文件路径示例为：uploads\user-1638470921415.pdf