我正在嘗試使用 mongoose、mongo、express 和 ejs 實作一個簡單的后端待辦事項串列。
我在添加“通過按下 html 復選框使用 mongoose 從 mongo 中洗掉專案”時卡住了
我試圖實作的代碼發生在“app.js”的第 76 和 86 行之間：
app.post('/delete', (req, res) => {
// DELETE CHECKED ITEM ON list.ejs FORM USING ITS _id
const checkedItemId = req.body.checkbox;
console.log(checkedItemId);
Item.findByIdAndRemove(checkedItemId, (err) => {
if (!err) {
console.log('Successfully deleted checked item');
res.redirect('/');
}
});
});
一旦我選中復選框，該專案不會被洗掉并保持可見，如果我選中復選框兩次，“.findByAndRemove”函式似乎可以作業并給我“成功洗掉”但是一旦我用“db.items”檢查了mongo集合。 find()" 該專案仍然存在。
完整的專案可以在以下位置找到：
https://github.com/emanuelfavero/mongoose-todolist.git
請記住在啟動應用程式之前啟動 mongo 服務器，同時在專案目錄中運行“npm i”以在下載專案后安裝所需的 npm 包。
謝謝。
uj5u.com熱心網友回復：
確保您獲得的 id 是 ObjectId 并為回呼函式提供第二個引數，以便您可以獲得更好的錯誤訊息。
Item.findByIdAndRemove(checkedItemId, (err, docs) => {
if (err){
console.log(err)
}
else{
console.log("Removed Item: ", docs);
}
});
uj5u.com熱心網友回復：
問題不在于后端 app.js，而在于前端 ejs 檔案。以下是解決此問題的代碼：
注意：items.forEach() 現在變成了 newListItems.forEach()
<%- include("header") -%>
<!-- BACKGROUND IMAGE -->
<div class="background-image-container">
<div class="background-image"></div>
</div>
<!-- TITLE -->
<div class="list-container">
<div class="title">
<h2><%= listTitle %></h2>
</div>
<div class="list-card">
<% newListItems.forEach(function(item){ %>
<form action="/delete" method="post">
<div class="item">
<input
type="checkbox"
name="checkbox"
value="<%=item._id%>"
onChange="this.form.submit()"
/>
<span class="checkbox-label"><%=item.name%></span>
</div>
<input type="hidden" name="listName" value="<%= listTitle %>" />
</form>
<% }) %>
<!-- NEW ITEM -->
<form class="newItem" action="/" method="post">
<input
type="text"
name="newItem"
placeholder="New Item"
autocomplete="off"
/>
<button type="submit" name="list" value="<%= listTitle %>">
</button>
</form>
</div>
</div>
<%- include("footer") -%>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/357774.html
下一篇：如何從后端到前端訪問回應狀態代碼