在ReactJS和Axios上放置http://localhost:8080/api/update/19 404(未找到)[已关闭]

okxuctiv  于 2023-03-02  发布在  iOS
关注(0)|答案(1)|浏览(128)

**已关闭。**此问题为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坏请求的结果

s4chpxco

s4chpxco1#

非常感谢您的回答,我终于发现它实际上是一个错别字的路线,也我用了错误的语法为我的查询。干杯!

相关问题