React组件中props更新时currentHour变量未同步问题求助

核心原因分析 #

你当前代码里的currentHour是组件每次渲染时直接计算的，理论上只要localTime变化触发组件重绘，currentHour就会同步更新。如果没更新，大概率是以下两种情况：

1. 父组件传递的localTime实际未发生变化（比如请求返回的时间戳和旧值一致）
2. 组件被React.memo或其他缓存机制包裹，导致未触发重渲染

如果确认localTime确实更新但currentHour没变化，可以用以下两种方案修复：

方案一：用useState+useEffect显式同步状态 #

通过监听localTime变化，主动更新currentHour状态，确保两者强绑定：

import React, { useEffect, useState, useMemo } from 'react'
import HourData from './HourData'

const HourDataList = ({ hoursData, localTime }) => {
  // 初始化currentHour
  const [currentHour, setCurrentHour] = useState(() => 
    new Date(localTime * 1000).getHours()
  )

  // 监听localTime变化，更新currentHour
  useEffect(() => {
    setCurrentHour(new Date(localTime * 1000).getHours())
  }, [localTime])

  // 用useMemo优化数据数组计算，避免不必要的重渲染
  const dataArr = useMemo(() => {
    const arr = []
    for (let i = currentHour; i < currentHour + 6; i++) {
      // 防止数组越界，加空值判断
      arr.push(hoursData[i] || null)
    }
    return arr.filter(Boolean) // 过滤空值
  }, [currentHour, hoursData])

  return (
    <div className='flex flex-row mb-3'>
      {dataArr.map((data, i) => <HourData key={i} data={data} />)}
    </div>
  )
}

export default HourDataList

方案二：直接计算+useMemo优化（更简洁） #

如果不需要把currentHour作为独立状态管理，保留渲染时计算的逻辑，同时用useMemo优化dataArr生成，避免每次渲染都循环计算：

import React, { useMemo } from 'react'
import HourData from './HourData'

const HourDataList = ({ hoursData, localTime }) => {
  // 每次渲染时重新计算currentHour
  const currentHour = new Date(localTime * 1000).getHours()

  // 仅当currentHour或hoursData变化时，才重新生成数据数组
  const dataArr = useMemo(() => {
    const arr = []
    for (let i = currentHour; i < currentHour + 6; i++) {
      arr.push(hoursData[i] || null)
    }
    return arr.filter(Boolean)
  }, [currentHour, hoursData])

  return (
    <div className='flex flex-row mb-3'>
      {dataArr.map((data, i) => <HourData key={i} data={data} />)}
    </div>
  )
}

export default HourDataList

额外注意事项 #

• 检查父组件是否正确更新了localTime状态，确保新时间戳确实传递到了HourDataList组件
• 如果用了React.memo包裹HourDataList，要确保localTime和hoursData的引用是可变的（比如不要传递同一个不变的对象/值）
• 时区问题：getHours()基于本地时区返回小时数，如果需要UTC时间，改用getUTCHours()

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