Question 1

バックエンド：ルートを削除します（郵便配達員と協力しているので、変更する必要はないと思います）

const Student = require("../models/student_model");

const deleteStudent=(req,resp)=>{
   Student.deleteOne({_id: req.params.id}).then(
       ()=>{
           resp.status(200).json({
               message: "Deleted"
           })
       }
   )
   .catch(
       (error)=>{
            resp.status(400).json({
                error : error
            })
       }
   )

}
module.exports= deleteStudent

フロントエンド:(onClick= {deleteStudent}関数の設定方法についてサポートが必要です。axios.deleteを使用しています）

<div className='table_content'>
       <input type='text' value={search} onChange={changeHandler} placeholder='Search'/>
        <table>
            <tr>
                <th>Actions</th>
                <th>Registration Number</th>
                <th>Name</th>
                <th>Grade</th>
                <th>Subjects</th>
            </tr>
            {searchOp.map(data=>
                <tr key={data._id}>
                    <td><button>Edit</button> <button onClick={deleteStudent}>Delete</button></td>
                    <td>{data.registrationNumber}</td>
                    <td>{data.name}</td>
                    <td>{data.grade}</td>
                    <td>{data.subjects}</td>
                </tr>
                )}
        </table>
        </div>

Question 2

それで、私はあなたにそのdeleteStudent機能を手伝わせてください。これはコードになります：

const component = () => {

    const deleteStudent = (_id) => {

        axios.delete('YOUR ENDPOINT URL', {
            headers : {
                'Content-Type': 'application/json'
            },
            params : {
                id: _id
            }
        })
            .then( resp => {
                console.log(resp.message);
            })
            .catch( err => console.error );
    }


    return <div className='table_content'>
        <input type='text' value={search} onChange={changeHandler} placeholder='Search' />
        <table>
            <tr>
                <th>Actions</th>
                <th>Registration Number</th>
                <th>Name</th>
                <th>Grade</th>
                <th>Subjects</th>
            </tr>
            {searchOp.map(data =>
                <tr key={data._id}>
                    <td><button>Edit</button> <button onClick={() => deleteStudent(data._id)}>Delete</button></td>
                    <td>{data.registrationNumber}</td>
                    <td>{data.name}</td>
                    <td>{data.grade}</td>
                    <td>{data.subjects}</td>
                </tr>
            )}
        </table>
    </div>
}

ここで、私が関数を使用していることがわかりaxios.deleteます。エンドポイントのURLを使用する必要があります（例：http：// localhost：5000 / deleteItem）

バックエンドでCORSを有効にする必要がある場合もあります。あなたはここでより多くの情報を見つけることができます

アイテムsearchOpをWebページで自動的に再レンダリングする場合は、useStateフックを使用する必要があります。詳細については、こちらを参照してください。

応答