Tidak dapat menghantar data daripada useState ke Mysql
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
