使用forEach()方法渲染类生成的对象数组时遇到问题

你的代码核心问题出在点击添加按钮后的渲染逻辑：

1. 调用renderProjects(projects)时，传入的是Projects类的实例，而非单个Project对象。renderProjects函数期望接收带有nameOfProject getter的Project实例，但Projects类没有该属性，导致无法正确渲染项目名称。
2. 原代码未定义Task类，后续调用addTasksToProject时会直接报错。

修复后的完整代码 #

JavaScript 代码 #

class Project {
    constructor(name) {
        this.name = name;
        this.tasksArr = [];
    }
    get nameOfProject() {
        return this.name;
    }
    addTasksToProject(name, dueDate) {
        let newTask = new Task(name, dueDate);
        this.tasksArr.push(newTask);
    }
}

// 项目组管理类
class Projects {
    constructor() {
        this.listOfProjects = [new Project("Sample Project")];
    }
    addProjectToList(name) {
        let p = new Project(name);
        this.listOfProjects.push(p);
        return p; // 返回新创建的项目，方便直接渲染
    }
    get allProjects() {
       return this.listOfProjects;
    }
    get numOfProjects() {
        return this.listOfProjects.length;
    }
}

// 补充缺失的Task类
class Task {
    constructor(name, dueDate) {
        this.name = name;
        this.dueDate = dueDate;
    }
}

let projects = new Projects();

// 渲染单个项目的函数
function renderProjects(project) {
    const newProjectDiv = document.createElement("div");
    const projectDom = document.getElementById("project-list");
    newProjectDiv.textContent = project.nameOfProject; 
    newProjectDiv.classList.add("project-item");
    projectDom.append(newProjectDiv);
}

// 初始化渲染所有项目
projects.allProjects.forEach(renderProjects);

const addBtn = document.getElementById("add");
addBtn.addEventListener("click", addProjectBtn);

function addProjectBtn() {
    let projName = prompt("请输入项目名称");
    if (!projName) return; // 处理用户取消或输入为空的情况
    const newProject = projects.addProjectToList(projName);
    renderProjects(newProject); // 仅渲染新添加的项目
}

HTML 代码 #

<button id="add">添加项目</button>
<div id="project-list" class="project-list"></div>

关键修复点 #

• 修正渲染参数：在addProjectBtn中，传入addProjectToList返回的新Project实例给renderProjects，而非整个Projects对象。
• 补充Task类：补上原代码缺失的Task类定义，避免后续调用addTasksToProject时报错。
• 增加输入校验：过滤用户取消输入或空名称的情况，避免无效项目添加。

如果需要重新渲染全部项目（比如修改已有项目信息后），可以替换渲染逻辑为：

// 重新渲染所有项目的函数
function renderAllProjects() {
    const projectDom = document.getElementById("project-list");
    projectDom.innerHTML = ""; // 先清空容器
    projects.allProjects.forEach(renderProjects);
}

// 初始化时调用
renderAllProjects();

// 添加按钮事件中调用
function addProjectBtn() {
    let projName = prompt("请输入项目名称");
    if (!projName) return;
    projects.addProjectToList(projName);
    renderAllProjects(); // 重新渲染全部项目
}

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