javascript - Deleting columns in db tables only deletes some

Question

So I have this problem, where I create posts on my local site connected to phpmyadmin db and if I create 10 posts for example and then delete all and refresh the page, 3 of them are still there. It is like it didn't get through the db the first time.

Anyone who knows? Here is my code:

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, setMovieList] = useState([])
  const [newReview, setNewReview] = useState('')

  useEffect(() => {
    Axios.get('http://localhost:3001/api/get').then((response) => {
      setMovieList(response.data)
    })
  }, [])

  function submitReview() {
    Axios.post('http://localhost:3001/api/insert', {
      movieName: movieName,
      movieReview: review,
    })

    setMovieList([...movieReviewList, {
      movieName: movieName,
      movieReview: review
    }])
    setTimeout(function() {
      window.location.reload(false)
    }, 100)
  }

  const deleteReview = (id) => {
    Axios.delete(`http://localhost:3001/api/delete/${id}`)

    setMovieList(movieReviewList.filter((val) => val.id !== id))
  }

  const updateReview = (id) => {
    Axios.put(`http://localhost:3001/api/update`, {
      movieReview: newReview,
    })

    setNewReview('')

    //setTimeout(function () {
    //  window.location.reload(false)
    //}, 100)
  }

  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)
      }
    }
    /> <
    label > Review: < /label> <
    input type = "text"
    name = "review"
    onChange = {
      (e) => {
        setReview(e.target.value)
      }
    }
    />

    <
    button onClick = {
      submitReview
    } > Submit < /button>

    {
      movieReviewList.map((val, key) => {
        return ( <
          div key = {
            key
          }
          className = "card" >
          <
          h1 > {
            val.movieName
          } < /h1> <
          p > {
            val.movieReview
          } < /p>

          <
          button onClick = {
            () => {
              window.confirm('Are you sure you wish to delete this review?') &&
                deleteReview(val.id)
            }
          } >
          Delete <
          /button>

          <
          input type = "text"
          id = "update"
          onChange = {
            (e) => {
              setNewReview(e.target.value)
            }
          }
          /> <
          button onClick = {
            () => {
              updateReview(val.id)
            }
          } >
          Update <
          /button> <
          /div>
        )
      })
    } <
    /div> <
    /div>
  )
}

export default App

index.js:

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const app = express()
const mysql = require('mysql')

const db = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'mysql',
  database: 'cruddb',
})

app.use(cors())
app.use(express.json())
app.use(bodyParser.urlencoded({
  extended: true
}))

app.get('/api/get', (req, res) => {
  const sqlSelect = 'SELECT * FROM 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/:id', (req, res) => {
  const id = req.params.id
  const sqlDelete = 'DELETE FROM movie_reviews WHERE id = ?'

  db.query(sqlDelete, id, (err, result) => {
    if (err) console.log(err)
  })
})

app.put('/api/update', (req, res) => {
  const id = req.body.id
  const review = req.body.movieReview
  const sqlUpdate = 'UPDATE movie_reviews SET movieReview = ? WHERE id = ?'

  db.query(sqlUpdate, [review, id], (err, result) => {
    if (err) console.log(err)
  })
})

app.listen(3001, () => {
  console.log('running on port 3001')
})

question from:https://stackoverflow.com/questions/65951818/deleting-columns-in-db-tables-only-deletes-some

Answer 1

Waitting for answers