React中如何为多个元素生成独立不重复的随机数与随机日期

• 你在组件作用域内仅执行了一次随机数计算，得到的dataMonth、dataDay、dataYear是单次生成的固定常量，两个<h1>标签只是重复引用同一份变量值，自然输出完全一致。
• 现有代码存在语法错误：JavaScript 变量名不支持横杠-，const data-Year = xxx属于非法写法，会直接触发语法报错，需要改成驼峰格式的dataYear。
• 现有日期逻辑存在隐患：固定将日期范围设为1-30会生成不存在的无效日期，比如2月30日、6月31日这类不符合日历规则的值。

核心思路是把随机日期的生成逻辑封装成可重复调用的函数，每需要一份独立的随机日期，就调用一次函数生成新的值，不要复用单次计算的常量。

基础实现代码 #

// 通用随机整数生成函数
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

// 封装随机日期生成函数，每次调用返回一套独立的年/月/日值
function generateRandomDate() {
  const dataMonth = randomIntFromInterval(1, 12)
  const yearSuffix = randomIntFromInterval(15, 22)
  // 动态计算对应月份的实际最大天数，避免生成无效日期
  const maxDay = new Date(2000 + yearSuffix, dataMonth, 0).getDate()
  const dataDay = randomIntFromInterval(1, maxDay)
  return {
    month: dataMonth,
    day: dataDay,
    year: yearSuffix
  }
}

// 组件部分
function RandomDateComponent() {
  // 需要几个独立日期就调用几次生成函数，每次调用都会得到全新的随机值
  const date1 = generateRandomDate()
  const date2 = generateRandomDate()

  return (
    <>
      <h1>{date1.month}/{date1.day}/{date1.year}</h1>
      <h1>{date2.month}/{date2.day}/{date2.year}</h1>
    </>
  )
}

批量渲染多份随机日期 #

如果需要渲染3个以上的随机日期，不需要逐个声明变量，可以通过数组循环批量生成：

function MultiRandomDate({ count = 5 }) {
  // 生成指定数量的独立随机日期
  const randomDates = Array.from({ length: count }, () => generateRandomDate())

  return (
    <div>
      {randomDates.map((date, idx) => (
        <h1 key={idx}>{date.month}/{date.day}/{date.year}</h1>
      ))}
    </div>
  )
}

补充说明 #

• 如果你希望随机日期在组件后续重渲染时保持不变，不会重新生成，可以把日期生成逻辑放到useState初始值或者useMemo中做缓存。
• 如果你希望组件每次重渲染都刷新随机日期，直接使用上述写法即可。

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