ReactJS中使用map函数无法渲染数据的问题排查求助

核心问题1：splice修改原数据导致后续渲染异常 #

你用dataTime.splice(0,3)时直接修改了导入的TimeData原数组。由于TimeData是模块导出的变量，第一次渲染后原数组会被截断为空，组件重新渲染时dataTime就没有数据了，生成的chunks自然是空数组，无法渲染内容。

解决方法：先浅拷贝原数组再处理，避免修改源数据：

const dataTime = [...TimeData]; // 复制原数组，不影响原始数据
const chunks = [];
while (dataTime.length) {
  chunks.push(dataTime.splice(0,3));
}

核心问题2：key值不符合React规范 #

• 外层<div key={timeslot}>中，timeslot是数组，React会将其转为字符串作为key，若存在重复的时间段组合，会触发key冲突，导致渲染异常。
• 内层<p key={time}>如果time值存在重复（比如不同分组里有相同时间），同样会出现key重复问题。

修改方案：用索引组合生成唯一key：

chunks.map((timeslot, index) => { // 添加index参数
  return (
    <div key={index}> {/* 用索引作为外层key */}
      {timeslot.map((time, idx) => {
        return <p key={`${index}-${idx}`}>{time}</p> {/* 组合索引保证全局唯一 */}
      })}
    </div>
  ) 
})

额外验证步骤 #

1. 打开浏览器控制台查看是否有警告/错误，React对key重复、修改原数组这类问题会抛出明确提示。
2. 取消注释console.log(dataTime);，确认初始数据是否正确加载、是否有有效内容。

修改后的完整代码示例：

import React from 'react'
import '../TimeandDate/Time.css';
import TimeData from '../TimeandDate/TimeData';

const Time = () => {
   
   const dataTime = [...TimeData]; // 浅拷贝原数组
   console.log(dataTime);
   const chunks = [];
   while (dataTime.length) {
    chunks.push(dataTime.splice(0,3));
  }
     
  return (
    <div className='Main-Section'>
      <div className='First-Section'>Time</div>
      <div className='Second-Section'>
         <div className='date_title'>Wednesday , June 13</div>
          <div className='time_Slots'>
               {
                 chunks.map((timeslot, index) =>{
                  return (
                    <div key={index}>{timeslot.map((time, idx) => {
                         return  <p key={`${index}-${idx}`}>{time}</p>
                    })}
                    </div>
                  ) 
                  })}
          </div>
      </div>
    </div>
  )
}

export default Time

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