**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。
这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
2天前关闭。
Improve this question
我是新的React,并试图创建一个简单的crud应用程序,我不能完全得到更新的一部分的权利。我使用MySQL作为我的数据库。这里是我的代码:
App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [title, setTitle] = useState([""]);
const [author, setAuthor] = useState([""]);
const [content, setContent] = useState([""]);
const [data, setData] = useState([]);
const [newTitle, setNewTitle] = useState([""])
const [newAuthor, setNewAuthor] = useState([""]);
const [newContent, setNewContent] = useState([""]);
useEffect(() => {
axios
.get("http://localhost:8080/api/data")
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
};
async function deleteContent(id){
try {
const res = await axios.delete(`http://localhost:8080/api/delete/${id}`, {
})
}
catch (err) {
console.log(err)
}
}
async function updateContent(id){
try {
const res = await axios.put(`http://localhost:8080/api/update/${id}`, {
id: id,
title: newTitle,
author: newAuthor,
content: newContent
})
}
catch (err){
console.log(err)
}
}
async function postContent() {
try {
const res = await axios.post("http://localhost:8080/api/post", {
title: title,
author: author,
content: content,
}).then(() => {
setData([
...data,
{
title: title,
author: author,
content: content,
},
]);
});
} catch (err) {
console.log(err);
}
}
return (
<div className="App">
<form onSubmit={handleSubmit}>
<label>Title</label>
<input
required
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<label>Author</label>
<input
required
type="text"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
<label>Content</label>
<textarea
required
value={content}
onChange={(e) => setContent(e.target.value)}
></textarea>
</form>
<button onClick={postContent}>Post</button>
<h1>Data from MySQL Table</h1>
<ul>
{data.map((posts) => (
<>
{/* <li key={posts.id}>{posts.title}</li> */}
{/* <p>{posts.title}</p>
<p>{posts.content}</p> */}
<div class="container justify-content-center g-2 p-2 mt-2 mb-3">
<div class="card">
<div class="card-body">
<h3 class="card-title" key={posts.id}>
{posts.title}
</h3>
<h5 class="card-title">{posts.author}</h5>
<p class="card-text">{posts.content}</p>
<input
type="text"
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
/> <br />
<input
type="text"
value={newAuthor}
onChange={(e) => setNewAuthor(e.target.value)}
/> <br />
<input
type="text"
value={newContent}
onChange={(e) => setNewContent(e.target.value)}
/> <br />
<button
class="btn btn-success"
onClick={() => {
updateContent(posts.id);
}}
>
Update
</button>
<button
class="btn btn-danger"
onClick={() => {
deleteContent(posts.id);
}}
>
Delete
</button>
</div>
</div>
</div>
</>
))}
</ul>
</div>
);
}
export default App;
这是我后端的更新函数:
app.put('api/update/:id', (req, res) => {
const id = req.params.id
let title = req.body.newTitle
let author = req.body.newAuthor
let content = req.body.newContent
let query = `UPDATE posts SET title, author, content VALUES (${title}, ${author}, ${content}) WHERE id = `
db.query(query, id, (error, results) => {
if(error){
console.log(error)
console.log(query)
}
else{
res.send(results)
}
})
})
我已经尝试了不同的查询,但它没有解决问题。我仍然得到404找不到或AXIOS坏请求的结果
1条答案
按热度按时间s4chpxco1#
非常感谢您的回答,我终于发现它实际上是一个错别字的路线,也我用了错误的语法为我的查询。干杯!