按日期分组渲染表单问题：JS判断失效致日期Header不显示

你需要实现按日期分组渲染含日期字段的数组数据，每个日期的第一条数据前显示对应日期的头部，但现有代码里的if (Data != Data)判断完全错误（自身永远相等），导致头部从未渲染。以下是修复方案：

• 新增一个变量跟踪上一条数据的日期，用来和当前数据的日期做对比
• 初始化变量为null，确保第一条数据能触发头部渲染
• 遍历数组时，仅当当前日期与上一次记录的日期不一致时，才渲染头部

修复后的完整代码示例 #

// 示例数据数组（根据实际结构调整）
const shiftData = [
  { dataPassagem: '2024-05-20', turno: 'Manhã', detalhes: '...' },
  { dataPassagem: '2024-05-20', turno: 'Tarde', detalhes: '...' },
  { dataPassagem: '2024-05-21', turno: 'Noite', detalhes: '...' },
  // 更多数据项
];

let ultimaData = null;
let htmlResultado = '';

shiftData.forEach(item => {
  const dataAtual = item.dataPassagem;
  
  // 仅在当前日期与上一条不同时渲染头部
  if (dataAtual !== ultimaData) {
    htmlResultado += `<div class="card-header">Data Passagem de Turno - ${dataAtual}</div>`;
    ultimaData = dataAtual; // 更新记录的日期
  }
  
  // 渲染当前数据项的表单内容（根据实际结构调整）
  htmlResultado += `
    <div class="card-body">
      <p>Turno: ${item.turno}</p>
      <p>Detalhes: ${item.detalhes}</p>
    </div>
  `;
});

// 将生成的HTML插入到页面容器中
document.getElementById('container-passagens').innerHTML = htmlResultado;

关键说明 #

• ultimaData（上一次日期）初始为null，确保第一条数据一定会触发头部渲染
• 使用!==严格相等判断，避免隐式类型转换导致的匹配错误
• 每次渲染头部后立即更新ultimaData，保证同日期的后续数据不会重复渲染头部

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