reactjs prop 变化，但变量不取决于 prop

9lowa7mx 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(135)

有一个变量currentHour，当适当的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

来源：https://stackoverflow.com/questions/75218112/props-changes-but-variable-which-depends-of-props-not

2条答案

按热度按时间

sgtfey8w1#

使用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

赞(0）回复(0）举报 2023-01-25

hgb9j2n62#

如果您的组件没有重新呈现，则不会再次计算变量localTime。
React可能不会更新组件（即使其属性已更改）的原因有两个：
未通过setState正确更新 prop ，或对 prop 的引用保持不变。
因此，您要么查看这两点并更改组件的重新呈现行为，要么使用useEffect钩子，如另一个答案所示。

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs prop 变化，但变量不取决于 prop

2条答案

相关问题

热门标签

最新问答