[英]how to add href link with parameters fetched using api in react?
I have a frontend using react
.我有一个使用
react
的前端。 I want to add a link after the map to the survey page using parameters extracted from data fetched from the API.我想使用从 API 获取的数据中提取的参数在地图后添加一个链接到调查页面。 I have two problems:
我有两个问题:
I don't know how to add the parameters to the link我不知道如何将参数添加到链接中
The link could not be added after the function map it gives an error.在函数映射后无法添加链接,它给出了错误。
Here is my code:这是我的代码:
export default function Dashboard() {
const [students, setstudents] = useState([]);
useEffect(() => {
const fetchStudents = async () => {
try {
const resp = await Axios({
method: "GET",
url: "http://localhost:3001//student/courses",
headers: {
"Content-Type": "application/json",
},
});
setstudents(resp.data);
} catch (err) {}
};
fetchStudents();
}, []);
const classes = useStyles();
return (
<GridContainer>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="warning" stats icon>
<CardIcon color="warning">
<Icon>content_copy</Icon>
</CardIcon>
<p className={classes.cardCategory}>Completed surveys</p>
<h3 className={classes.cardTitle}>{students.toatl_voted}/{students.total_courses}</h3>
</CardHeader>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Available Surveys</h4>
<p className={classes.cardCategoryWhite}>
Here is the remaining courses surveys to submit
</p>
</CardHeader>
<CardBody>
<Table
tableHeaderColor="primary"
tableHead={["Course Code", "Course Name", "Survey Link"]}
tableData={students && students.map((student) => [student.surveys.Course_code,
student.survey.Course_name])}
//href link should be added here as follow api: url/student/course/:sectionId/:departmentId it must be clickeable
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
}
A lot of info seems to be missing from this question.这个问题似乎缺少很多信息。 But I will suggest the following as a starting place to solving this problem.
但我会建议以下作为解决这个问题的起点。 Assumption 1:
<Table />
's tableData
prop accepts the React.ReactNode
proptype.假设1:
<Table />
的tableData
丙接受React.ReactNode
proptype。 Any React UI should be able to render a basic ReactNode.任何 React UI 都应该能够渲染一个基本的 ReactNode。 If not, opt for a different
<Table />
API.如果没有,请选择不同的
<Table />
API。 The href template parameters in the following example are mock student properties.以下示例中的 href 模板参数是模拟学生属性。
...
const getTableData = students => {
if(!Array.isArray(students) || !students.length){
return null;
}
return students.map( student => [
student.surveys.Course_code,
student.survey.Course_name,
(<a href={`url/student/course/${student.sectionId}/${student.departmentId}`}>
Department# {student.departmentId}
</a>
)
]);
};
<GridContainer>
...
<Table
tableData={getTableData(students)}
tableHead={["Course Code", "Course Name", "Survey Link"]}
tableHeaderColor="primary"
/>
...
</GridContainer>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.