道具改变但变量取决于道具不答案

【问题标题】：props changes but variable which depends of props not道具改变但变量取决于道具不
【发布时间】：2023-01-24 14:57:39
【问题描述】：

有变量 currentHour，当 prop localTime 更改时需要更改，但是当我执行另一个请求时，localTime 更改但 currentHour 没有。

我试过钩子，但我想我没有正确使用它

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

const HourDataList = ({hoursData, localTime}) => {
  
  //new Date(localTime*1000).getHours()

  let currentHour = new Date(localTime*1000).getHours()
 
 
  console.log(localTime)
  console.log(currentHour)  
  const dataArr = []

  for (let i = currentHour; i < currentHour+ 6; i++) {
    dataArr.push(hoursData[i])
  }
  

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

export default HourDataList

【问题讨论】：

标签： reactjs

【解决方案1】：

使用 react state 和 useEffect 来监听 localTime 的变化并强制组件重新渲染

像这样：

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

const HourDataList = ({hoursData, localTime}) => {
    
    const [dataArr,setDataArr] = useState([])

    useEffect(()=>{
        let currentHour = new Date(localTime*1000).getHours()
        const arr = []

        for (let i = currentHour; i < currentHour+ 6; i++) {
            arr.push(hoursData[i])
        }
        setDataArr(arr)
    },[localTime])

    return (
        <div className='flex flex-row mb-3'>

            {dataArr.map((data, i) => <HourData key={i} data={data}/>)}


        </div>
    )
}
export default HourDataList

【讨论】：