Javascript 如何在react中添加带有使用api获取的参数的href链接？

我有一个使用

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>
   );
     }

导出默认功能仪表板（）{
const[students，setstudents]=useState（[]）；
useffect（（）=>{
const fetchStudents=async（）=>{
试一试{
const resp=等待Axios({
方法：“获取”，
url:“http://localhost:3001//student/courses",
标题：{
“内容类型”：“应用程序/json”，
},
});
设置学生（相应数据）；
}捕获（错误）{}
};
吸引学生（）；
}, []);
const classes=useStyles（）；
返回(
内容拷贝
已完成的调查
{学生。toatl_投票}/{学生。课程总数}
现有调查

以下是要提交的剩余课程调查

[student.surveys.Course_代码，
学生.调查.课程名称]
//href链接应添加在此处，如下api:url/student/course/：sectionId/：departmentId必须可单击
/>
);
}

这个问题似乎遗漏了很多信息。但我会建议以下作为解决这个问题的起点。假设1:

的

tableData

prop接受

React.ReactNode

proptype。任何React UI都应该能够呈现基本React节点。如果没有，请选择不同的

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>
...

。。。
const getTableData=students=>{
if（！Array.isArray（students）| |！students.length）{
返回null；
}
返回students.map（student=>[
学生。调查。课程代码，
学生。调查。课程名称，
(
)
]);
};
...
...
...

您使用什么作为ui库？那么您是说fetch返回sectionId和departmentId？