.NET을 사용하는 프런트 엔드가 react있습니다. API에서 가져온 데이터에서 추출한 매개 변수를 사용하여 설문 조사 페이지에지도 뒤에 링크를 추가하고 싶습니다. 두 가지 문제가 있습니다.
링크에 매개 변수를 추가하는 방법을 모르겠습니다.
오류가 발생한 함수 맵 이후에 링크를 추가 할 수 없습니다.
내 코드는 다음과 같습니다.
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>
);
}
이 질문에서 많은 정보가 누락 된 것 같습니다. 그러나 나는이 문제를 해결하기위한 출발점으로 다음을 제안 할 것이다. 가정 1 : <Table />의 tableDataprop은 React.ReactNodeproptype을받습니다. 모든 React UI는 기본 ReactNode를 렌더링 할 수 있어야합니다. 그렇지 않은 경우 다른 <Table />API를 선택하십시오. 다음 예제의 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>
...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다