ReactJS中数组Map遍历任务时出现任务重复显示的问题求助

看起来你遇到的核心问题是任务被重复添加到对应日期的div中，不管用map还是for循环都出现这个情况，大概率是因为这段渲染任务的代码被执行了多次，而且每次执行时没有先清空对应日期div里已有的任务元素。

为什么会出现重复？ #

举个简单的场景：如果你的页面在数据更新、页面重新渲染这类触发条件下，会再次调用这段tasks.map(...)的代码，那么每次调用都会给对应日期div新增一批<p>元素，而不是替换掉旧的内容，自然就会出现任务重复显示的问题。

具体修复方案 #

你可以根据自己的场景选择下面的解决方案：

方案1：单个日期div清空后再添加（适合同一日期仅一个任务的场景）

修改原代码，在创建新任务元素前，先清空目标日期div里的旧内容：

tasks.map((task) => { 
  var taskDay = document.getElementById(task.deadline); 
  if(taskDay){ 
    // 先清空当前日期div内的旧任务
    taskDay.innerHTML = '';
    var newTaskP = document.createElement("p"); 
    newTaskP.innerHTML = task.taskId; 
    taskDay.appendChild(newTaskP); 
  } 
})

方案2：先批量清空所有日期div（适合多任务场景）

如果同一个日期可能存在多个任务，方案1会导致每个日期只保留最后一个任务。这时候建议先统一清空所有日期div的任务区域，再重新渲染所有任务：

// 先获取所有日期div并清空任务内容
document.querySelectorAll('div[id^="20"]').forEach(div => {
  // 这里的选择器适配YYYY-MM-DD格式的id，可根据实际年份调整开头数字
  div.innerHTML = '';
});

// 重新渲染所有任务
tasks.map((task) => { 
  var taskDay = document.getElementById(task.deadline); 
  if(taskDay){ 
    var newTaskP = document.createElement("p"); 
    newTaskP.innerHTML = task.taskId; 
    taskDay.appendChild(newTaskP); 
  } 
})

额外排查点

你还可以检查这段代码是否被绑定到了重复触发的事件上（比如window.onresize、数据监听的回调函数），如果是这类情况，需要调整触发逻辑，避免不必要的重复执行。

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