ReactJS中如何将JSON数据按hour字段匹配渲染到表格对应小时单元格

实现思路 #

• 首先修正原代码的语法错误：HTML中id属性必须唯一，你现在所有时段单元格都用了重复的id="cell"、id="cell2"、id="collapse"，会导致DOM识别异常，改成class属性即可。
• 不需要通过id匹配实现，更简单的方案是：针对每个时段的内容单元格，直接筛选JSON中hour字段等于当前时段起始小时的条目，直接渲染即可。
• 预定义小时和单元格的对应关系：比如0h-1h对应hour=0，14h-15h对应hour=14，23h-00h对应hour=23，以此类推即可。

修改后完整代码 #

import Mockup from '../data/MOCK_DATA.json';

const DailyTable = () => {
  // 补全原代码缺失的date变量声明，可根据需求调整日期格式
  const date = new Date().toLocaleDateString('fr-FR');
  // 封装按小时筛选任务的公共方法
  const getTasksByHour = (targetHour) => {
    return Mockup.filter(item => item.hour === targetHour);
  };

  return(
    <table id="simple-board">
      <tbody id='tbody'>
        <tr>
          <td id='head' colSpan='24'>Planning journalier du {date}</td>
        </tr>
        <tr className="collapse">
          <td className="cell">0h-1h</td>
          <td className="cell">1h-2h</td>
          <td className="cell">2h-3h</td>
          <td className="cell">3h-4h</td>
          <td className="cell">4h-5h</td>
          <td className="cell">5h-6h</td>
          <td className="cell">6h-7h</td>
          <td className="cell">7h-8h</td>
          <td className="cell">8h-9h</td>
          <td className="cell">9h-10h</td>
          <td className="cell">10h-11h</td>
          <td className="cell">11h-12h</td>
        </tr>
        <tr>
          <td className="cell2">
            {getTasksByHour(0).map(task => (
              <div key={task.id}>
                <p>*任务：* {task.task}</p>
                <p>*地点：* {task.location}</p>
              </div>
            ))}
          </td>
          <td className="cell2">
            {getTasksByHour(1).map(task => (
              <div key={task.id}>
                <p>*任务：* {task.task}</p>
                <p>*地点：* {task.location}</p>
              </div>
            ))}
          </td>
          <td className="cell2">{getTasksByHour(2).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(3).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(4).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(5).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(6).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(7).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(8).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(9).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(10).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(11).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
        </tr>
        <tr className='collapse'>
          <td className="cell">12h-13h</td>
          <td className="cell">13h-14h</td>
          <td className="cell">14h-15h</td>
          <td className="cell">15h-16h</td>
          <td className="cell">16h-17h</td>
          <td className="cell">17h-18h</td>
          <td className="cell">18h-19h</td>
          <td className="cell">19h-20h</td>
          <td className="cell">20h-21h</td>
          <td className="cell">21h-22h</td>
          <td className="cell">22h-23h</td>
          <td className="cell">23h-00h</td>
        </tr>
        <tr>
          <td className="cell2">{getTasksByHour(12).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(13).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(14).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(15).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(16).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(17).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(18).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(19).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(20).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(21).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(22).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
          <td className="cell2">{getTasksByHour(23).map(task => (<div key={task.id}><p>*任务：* {task.task}</p><p>*地点：* {task.location}</p></div>))}</td>
        </tr>
      </tbody>
    </table>
  )
}

优化建议 #

如果觉得重复写24个单元格逻辑太冗余，可以把0-23的小时存成数组，用map循环渲染整行单元格，减少重复代码：

// 生成0-23的小时数组
const hours = Array.from({length:24}, (_,i) => i);
// 渲染时段行和内容行的时候直接遍历hours数组即可

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