Tidak dapat menghantar data daripada useState ke Mysql

Question

Saya cuba menghantar data input daripada useState ke Mysql tetapi ia tidak berlaku. Walaupun saya boleh mendapatkan data dari pangkalan data ke halaman, apabila ia datang kepada penerbitan, saya tidak tahu bagaimana untuk menghantar data dari cangkuk status ke mysql apabila terdapat banyak nilai. Sila tengok

---

Kod saya untuk menghantar data borang

import React,{useState , useRef} from "react";
import "./AddProjects.css"
import axios from "axios";
import Projects from "../Projects/Projects";
import {BiChevronLeftCircle,BiChevronRightCircle} from "react-icons/bi"

export default function AddProjects() {
    
    
    const [AddProjects,setAddProjects] = useState({
        ProjectName:"",
        Discription:"",
        git:"",
        Img:""
    })


    const [getQuery,setGetQuery] = useState({
        projectList:[]
    })


    const inputFile = useRef(null)


    function handleChange(e) {
        const {name , value} = e.target;
        setAddProjects(newProjects => ({
            ...newProjects,[name]:value
        }))


    }
    function imgChange(e) {
        setAddProjects({ ...AddProjects, Img: URL.createObjectURL(e.target.files[0]) });
    }


    function getProjectList() {
        axios.get(`http://localhost:3060/projects`)
        .then((response) => response.data)
        .then(response2 => {
            setGetQuery({projectList : response2})
        })
    }

    function onSubmitHandler(e) {
        axios.post(`http://localhost:3060/addProjects`,{
                ProjectName: AddProjects.ProjectName,        
                Discription:AddProjects.Discription,
                git:AddProjects.git,
                Img:AddProjects.Img
        })
        getProjectList()
    }
    return(
        <>
            <div className="AddProjects">  
                <form onSubmit={onSubmitHandler} method="POST" encType="multipart/form-data" >
                    <h2>Add New Project</h2>
                    <input  type="text" placeholder="Project Name..."     name="ProjectName" onChange={handleChange}/>
                    <input  type="text"   placeholder="Project Discription..."   name="Discription" onChange={handleChange}/>
                    <input  type="text"   placeholder="Git Repository/Code..."    name="git" onChange={handleChange}/>
                    <input type="file"  accept="image/jpg,image/jpeg" name="Img" onChange={imgChange} ref={inputFile} />
                    <button type="button"onClick={() => inputFile.current.click()}>Add New Image</button>
                    <button type="submit" >Submit Project</button>
                </form>
                <button onClick={getProjectList}>click me </button>
            </div>
            <div>
                <div className="Section-Projects" >
                <h1>My Projects </h1>
                {/* <Link to={checkBox?'/AddProjects':""} ><button className="Add-newProject" onClick={onStateChange}><IoIosAddCircleOutline/></button></Link>  */}

                <div className="Projects">
                    <button className="arrowLeft"><BiChevronLeftCircle /></button>
                            <div className="Single">
                                {getQuery.projectList.map((gettingQuery) => 
                                    <Projects   
                                    ProjectId={gettingQuery.ProjectId}
                                    ProjectName={gettingQuery.ProjectName}
                                    Discription={gettingQuery.Discription}
                                    git={gettingQuery.git}
                                    Img={gettingQuery.Img}
                                        />
                                )}
                            </div>
                        <button className="arrowRight"><BiChevronRightCircle /></button>
                    </div>
                </div>
            </div>
                </> 
    )

};

Seperti yang anda lihat saya ingin menghantar 4 perkara ke jadual mysql tetapi saya tidak fikir ini adalah cara untuk melakukannya, saya tidak dapat memikirkannya

---

Kod fail yang menghantar data

const express = require('express');
const cors = require('cors')
const PORT = 3060;
const db  = require('./Database')

const bodyParser = require('body-parser');
const { response } = require('express');

const app = express();

app.use(cors());
app.use(bodyParser.json());

app.get('/projects', (req,res) => {
    const TASK_QUERY = `SELECT * FROM  addprojects.newproject`;
    db.query(TASK_QUERY , (err, response) => {
        if(err) res.status(404).send('somthings wrong')
        else res.send(response)
    })
});

app.post('/addProjects', (req,res) => {
    const ADD_QUERY = `INSERT INTO addprojects.newproject VALUES('${req.body.data}')`;
    db.query(ADD_QUERY, (err) => {
        if (err) console.log(err)
        else res.send('Query added sucsessfully')
    })
    
} );

app.listen(PORT, () => {
    console.log('app is listning to port 3000')
})

Saya rasa walaupun kaedah pengeposan betul, nilainya tidak jadi tolong bantu saya, saya telah terperangkap dalam perkara ini selama 2 hariSebarang nasihat akan membantu

Answer 1

INSERT INTO tablename (columnName1, columnName2) VALUES ('Company Inc', 'Highway 37')

Untuk bahagian belakang:

Anda tidak menyebut nama lajur, ia tidak tahu medan mana yang tergolong dalam lajur mana dalam jadual.

Untuk bahagian hadapan:

axios.post(`http://localhost:3060/addProjects`,{
            ProjectName: AddProjects.ProjectName,        
            Discription:AddProjects.Discription,
            git:AddProjects.git,
            Img:AddProjects.Img
    })

ProjectName,Discription,git,Img Jadikan nama kunci ini sama persis dengan nama lajur anda. dan anda sedang memuat naik imej dalam api ini jadi dalam formdata tukar data dari hadapan dan kemudian hantar data itu dalam api dan di belakang anda akan lulus data itu dalam formdata