如何解决Todo列表添加第二项时覆盖第一项的问题？

核心问题原因 #

你当前的后端代码每次接收POST请求时，只传递单个新任务给EJS，没有维护一个任务列表来存储所有已添加的任务；同时EJS仅判断并渲染单个任务，所以每次新任务都会覆盖之前的条目。

修复步骤 #

1. 修改后端JS代码，维护任务列表 #

在后端创建一个数组存储所有任务，每次新增任务时将其加入数组，再把整个数组传给EJS：

import express from "express";
import bodyParser from "body-parser";

const app = express();
const port = 3000;  

// 用数组存储所有任务（注意：全局数组重启服务会丢失数据，生产环境建议用数据库）
let tasks = [];

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

app.listen(port, () => {
    console.log(`website is online at ${port}.`)
});

app.get("/", (req, res) => {
    // 把任务数组传给EJS
    res.render("index.ejs", { tasks: tasks });
});

app.post("/items", (req, res) => {
    // 将新任务添加到数组
    tasks.push(req.body.padText);
    // 渲染页面时传入完整任务列表
    res.render("index.ejs", { tasks: tasks });
});

2. 修改EJS文件，循环渲染所有任务 #

修改EJS中的任务渲染部分，遍历任务数组生成每个任务条目：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLOGGERS</title>
    <link rel="stylesheet" href="/styles/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap" rel="stylesheet">

</head>
<body>
    <div class="navBox">
        <nav>
            <p id="headerText">
                BLOOGERS
            </p>
        </nav>
    </div>
    <div class="container">
        <div class="pad">
            <form class="rowContainer" action="/items" method="POST">
            <input class="inputBox" placeholder="New post to the ol pad..." type="text" name="padText" required>
            <button type="submit">+</button>
            </form>
            <!-- 遍历任务数组，渲染每个任务条目 -->
            <% if (tasks && tasks.length > 0) { %>
                <% tasks.forEach(task => { %>
                    <div class="rowContainer2">
                        <input class="inputBox" value="<%= task %>" type="text" required>
                        <button class="delButton">del</button>
                    </div>
                <% }) %>
            <% } %>
                    
        </div>
        
    </div>
    <footer>
        <p>IKM © 2024</p>
    </footer>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="/index.js" charset="UTF-8"></script>

    
</body>
</html>

关于你的提问质量 #

你的提问整体很合格，符合StackOverflow的规范：

• 明确描述了问题现象（第一个任务正常，第二个覆盖）
• 提供了完整的相关代码（后端JS和EJS）
• 说明了自己的尝试（localStorage）和需求限制（仅用EJS/后端JS）

小优化建议：

• 可以补充说明使用localStorage时遇到的具体问题（比如代码逻辑、报错信息），能帮助回答者更精准分析
• 标题可以更精准，比如改为「Express+EJS开发Todo列表，添加第二个任务时覆盖第一个，如何实现新增任务功能？」

内容的提问来源于stack exchange，提问作者TroglodyteTerry