Блог

Поэтому в настоящее время я изучаю react и пытаюсь создать простое CRUD-приложение. Для этой цели я создал простой интерфейс, где вы можете ввести название фильма и дать краткий обзор. Фильм и обзор сохраняются в базе данных и отображаются на интерфейсе. Как вы можете видеть, я уже добавил фильмы «Начало» и «художник-катастрофа».

Теперь я хочу иметь возможность удалять записи из интерфейса и моей базы данных. Вот почему я реализовал кнопку удаления. К сожалению, всякий раз, когда я пытаюсь что-то удалить, я получаю эту ошибку:

Я абсолютно не представляю, что означает эта ошибка и откуда она берется. Я действительно благодарен за любой совет, потому что я смотрел на это в течение нескольких часов, не понимая этого ^^ Вот мой код:

App.js

 import React, {useState, useEffect} from "react"; import './App.css'; import Axios from 'axios';  function App() {   const [movieName, setMovieName] = useState(''); const [review, setReview] = useState(''); const [movieReviewList, setMovieReviewList] = useState([]);   useEffect(()=> {  Axios.get("http://localhost:3001/api/get").then((response) =>   {    setMovieReviewList(response.data)  }) });  const submitReview = () => { Axios.post('http://localhost:3001/api/insert', {  movieName : movieName, movieReview : review}).then(() =>{     //adds the new movie that we added to our databa to display it on the mapping  setMovieReviewList([...movieReviewList, {movieName: movieName , movieReview: review} ])  }) }; const deleteReview = (movie) => { Axios.delete(`http://localhost:3001/api/delete/${movie}`);  }   return (  <div className="App">  <h1>CRUD Application</h1>  <div className = "form" >  <label>Movie name : </label>  <input type = "text" name = "movieName" onChange={(e) =>{  setMovieName(e.target.value)  }} ></input>   <label>Review : </label>  <input type = "text" name = "review" onChange={(e) =>{  setReview(e.target.value)}} ></input>   <button onClick={submitReview}> Submit</button>   {movieReviewList.map((val)=>{  return <div className="card">  <h2>{val.movieName}</h2>  <p>{val.movieReview}</p>  <button onClick={()=> {deleteReview(val.movieName)}}>Delete</button>  <input type ="text" id = "updateInput"></input>  <button>Update Review</button>    </div>  })}  </div>  </div>  ); }  export default App;   

index.js

 const express = require('express'); const bodyParser = require ('body-parser'); const app = express(); const mysql = require('mysql'); const cors = require('cors');  const db = mysql.createPool({  host: "localhost",  user: "root",  password:"password",  database:'CRUDDatabase', });   app.use(cors()); app.use(express.json()); app.use(bodyParser.urlencoded({extended: true}))  app.get('/api/get', (req,res)=>{   const sqlSelect = 'SELECT * FROM CRUDDatabase.Movie_Reviews;'  db.query(sqlSelect, (err,result)=> {  res.send(result);  })  })  // app.post('/api/insert', (req,res)=>{  const movieName = req.body.movieName;  const movieReview = req.body.movieReview;   const sqlInsert = 'INSERT INTO movie_reviews (movieName, movieReview) VALUES (?,?)'  db.query(sqlInsert, [movieName, movieReview], (err, result) => {  //console.log(result);  }); })  app.delete("api/delete/:movieName"), (req,res)=>{  const name = req.params.movieName;  const sqlDelete = "DELETE FROM movie_reviews WHERE movieName = ?";   db.query(sqlDelete, name, (err, result)=>{  if (err) console.log(err);   })  }  app.listen(3001, () => {  console.log("running on port 3001") })   

В бэкэнд-коде похоже, что в конечной точке отсутствует косая черта.

Изменение с:

 app.delete("api/delete/:movieName"), (req,res)=>{  

Для:

 app.delete("/api/delete/:movieName"), (req,res)=>{  

Хорошо, я нашел это, и это была просто простая синтаксическая ошибка:

в бэкэнде вместо:

 app.delete("api/delete/:movieName"), (req,res)=>{  const name = req.params.movieName;  const sqlDelete = "DELETE FROM movie_reviews WHERE movieName = ?";   db.query(sqlDelete, name, (err, result)=>{  if (err) console.log(err);   })  

это должно быть:

 app.delete("/api/delete/:movieName", (req,res)=>{  const name = req.params.movieName;  const sqlDelete = "DELETE FROM CRUDDatabase.Movie_Reviews WHERE movieName = ?";   db.query(sqlDelete, name, (err, result)=>{  if (err) console.log(err);   });  })