Impossible de publier des données de useState vers Mysql

J'essaie de publier les données d'entrée de useState vers Mysql mais cela ne se produit pas. Bien que je sois capable d'obtenir les données de la base de données vers la page, en ce qui concerne la publication, je ne sais pas comment envoyer les données du hook d'état vers MySQL lorsqu'il y a beaucoup de valeurs. Veuillez jeter un oeil

Mon code pour envoyer les données du formulaire

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

};

Comme vous pouvez le voir, je veux envoyer 4 choses à une table MySQL mais je ne pense pas que ce soit la façon de le faire, je n'arrive tout simplement pas à comprendre

Le code du fichier qui envoie les données

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

Je pense que même si la méthode de publication est correcte, la valeur ne l'est pas, alors aidez-moi s'il vous plaît, je suis bloqué là-dessus depuis 2 joursTout conseil serait utile

P粉368878176230 Il y a quelques jours366

Impossible de publier des données de useState vers Mysql

répondre à tous(1)je répondrai