javascript - 当我需要在 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

现在，我想首先单击视图classId: 1并仅获取该类的信息....我后面的控制器要求@PathVariable输入以获取该特定类的信息。

如何将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;

标签： javascriptreactjs

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

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