当我需要在 url 中使用参数时，如何从数据库中获取数据？

Question

我现在正在做一些 React，我需要帮助。 我有一个看起来像这样的表：

 Your teaching classes: ID Subject Class School Year 1 Mathematics V 2019 View 2 Mathematics VI 2019 View 3 Mathematics VII 2019 View

现在，我想单击 first classId: 1上的视图并仅获取该 class 的信息......我后面的 controller 要求输入@PathVariable以获取该特定 ZA2F2ED4F8EBC2CBB4C21A29 的信息

如何获取作为结果的class_id并将其放入url？

相关代码：

 import React, {Component} from 'react' import {NavLink, Route,BrowserRouter, Switch, Redirect} from 'react-router-dom' import ClassStudentGrades from '../Teachers/ClassStudentGrades' class ClassPage extends Component { constructor(){ super(); this.state={ isLoading:false, isError:false, classes: [], selectedClass:null }; this.handleView=this.handleView.bind(this); } handleView (e) { e.preventDefault(); const response = fetch ('http://localhost:8095/dnevnik/teaching/class/' + this.state.classe.CLASS_ID, { method: 'GET', headers: { 'Authorization': 'Basic ' + window.btoa(this.props.username + ":" + this.props.password), "Content-type": "application/json; charset=UTF-8", 'Accept': 'application/json' }, }); this.setState({selectedClass:null}) } async componentDidMount() { this.setState({isLoading:true}); const response = await fetch('http://localhost:8095/dnevnik/teacher/class', { method: 'GET', headers: { 'Authorization': 'Basic ' + window.btoa(this.props.username + ":" + this.props.password), "Content-type": "application/json; charset=UTF-8", 'Accept': 'application/json', } }); if(response.ok) { const classes= await response.json(); this.setState({classes, isLoading:false}) } else { this.setState({isLoading:false, isError:true}) } } render() { const {classes, isLoading, isError} = this.state; if(isLoading) { return <div>Loading...</div> } if(isError){ return <div>Error....</div> } return classes.length > 0? ( <div> <BrowserRouter> <h3>Your teaching classes:</h3> <table className="tablemark"> <thead> <tr> <th>ID</th> <th>Subject</th> <th>Class</th> <th>School Year</th> </tr> </thead> <tbody> {this.state.classes.map((classe) => { return( <tr key={classe.schoolClass.CLASS_ID} > <td>{classe.schoolClass.CLASS_ID}</td> <td>{classe.teacher.subject.name}</td> <td>{classe.schoolClass.className}</td> <td>{classe.schoolClass.schoolYear}</td> <td><button onClick={this.handleView}>View</button></td> </tr> )})} </tbody> </table> </BrowserRouter> </div> ): null } } export default ClassPage;

Answer 1

您可以添加点击处理程序

{this.state.classes.map((classe) => {
                    return(
                        <tr key={classe.schoolClass.CLASS_ID} onClick={() => handleClick(classe)} >
                            <td>{classe.schoolClass.CLASS_ID}</td>
                            <td>{classe.teacher.subject.name}</td>
                            <td>{classe.schoolClass.className}</td>
                            <td>{classe.schoolClass.schoolYear}</td>
                            <td><button onClick={this.handleView}>View</button></td>
                        </tr>
                    )})}

和

handleClick = classe => { console.log(classe.CLASS_ID) }

在这个处理程序中，您可以发出请求