如何使用 vanilla JavaScript 从列表中删除项目？

Question

我正在尝试使用 vanilla javascript 和 axios 构建图书目录。我想要的是每次我按下删除按钮时，这本书都会从列表中删除。但是每次我按下按钮时，它都会显示错误。不知道哪里出了问题

我的 app.js 文件：

 const delBtn = [...document.querySelectorAll(".del-btn")];

  delBtn.map((button) => {
  button.addEventListener("click", async (e) => {
     e.preventDefault();
     const idValue =
        e.currentTarget.parentElement.firstElementChild.nextElementSibling
           .nextElementSibling.innerHTML;

     try {
        const res = await axios.delete(`/api/books/${Number(idValue)}`);

        const data = res.data.find((book) => book.id === Number(idValue));

        if (!data) {
           console.log(`No book with such${idValue}`);
        }
        const filteredBook = books.filter((book) => {
           if (book.id !== Number(idValue)) {
              const { title, author, image, desc, id } = book;
              return `
              <div class="card flex" style="width: 18rem; min-height:24rem;">
                    <img
                    src=${image}
                    class="card-img-top w-50 rounded mx-auto d-block"
                    alt="#"
                     />
                  <div class="card-body">
                 <h4 class="card-title">${title}</h4>
                 <h6>Written by: <span class="text-primary">${author}</span></h6>
                 <p>${id}</p>
               <p class="card-text"> ${desc}</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
        <a
           class="btn btn-danger del-btn"
           type="submit"
           ">Delete</a>
     </div>
     </div>  
        `;
           }
        });
        card.innerHTML = filteredBook;
     } catch (error) {
        console.log("Error");
     }
  });

我的 server.js 文件：

app.delete("/api/books/:id", (req, res) => {
const { id } = req.params;

const book = books.find((book) => book.id === Number(id));

 if (!book) {
   return res
     .status(400)
     .json({ success: false, msg: `No book with the id of ${id}` });
 }

 const newBook = books.filter((book) => book.id !== Number(id));
 return res.status(200).json({ success: true, data: newBook });
  });

app.listen(PORT, () => {
console.log("Server is running on port 5000...");
});

Answer 1

看起来像这样：

const data = res.data.find((book) => book.id === Number(idValue));

需要改为：

const data = res.data.data.find((book) => book.id === Number(idValue));

res.data 是 axios 响应数据，然后您需要在响应中获得一个 data 元素。您的回复是这样的：

return res.status(200).json({ success: true, data: newBook });

所以，axios 的 res.data 给你这个 { success: true, data: newBook } 所以要得到 newBook 数据，你需要 res.data.data.

仅供参考，所有这些都是基本调试。您记录您的确切错误，按照它给您的提示进行操作，然后记录其他中间值以查看哪里出了问题，通常您随后可以看到错误所在。

如何使用 vanilla JavaScript 从列表中删除项目？

How to delete an item from a list using vanilla JavaScript?

html

javascript

node.js

axios