ReactJS时间戳 - 编程之家

如何解决ReactJS时间戳

这是我的代码-

const [time,setTime] = useState('')

const getRefresh = () => {
        pageContext.refreshList()
        var today = new Date()
        var currentTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
        setTime(currentTime)
    }

<div className="bttn-layout">
    <LastRefreshed getRefresh={time}/>
    <Button label="Refresh" onClick={e =>getRefresh()} />
</div>

这是我的“ LastRefreshed”组件中的代码-

const LastRefreshed = (props) => {

   
    return (
        <div>
            <p>Last Refreshed: {props.time} </p>
        </div>

    )
}


export default LastRefreshed;

理想地，当单击刷新按钮时，它将调用getRefresh函数，该函数将更新我的主页上的列表以及将当前时间戳传递到“时间”状态。然后，此状态由我的“ LastRefreshed”函数使用，因此将显示最近刷新的时间戳。目前，上面的代码无法正常工作。肯定会调用getRefresh函数，但是我正在努力抽出时间在LastRefreshed组件中显示。我想知道是否是因为状态未正确更新？任何帮助表示赞赏！

解决方法

<div className="bttn-layout">
    <LastRefreshed time={time}/>
    <Button label="Refresh" onClick={e =>getRefresh()} />
</div>

您应该将LastRefreshed的道具名称更改为time。

更改
<p>Last Refreshed: {props.time} </p>至<p>Last Refreshed: {props.getRefresh} </p>
或
<LastRefreshed getRefresh={time}/>至<LastRefreshed time={time}/>

prop参数的名称与组件中使用的名称不符

<LastRefreshed time={time}/>

代码：-

const [time,setTime] = useState('');

const getRefresh = () => {
        pageContext.refreshList();
        var today = new Date();
        var currentTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
        setTime(currentTime);
    }

<div className="bttn-layout">
    // component property should be `time` instead of `getRefresh`
    <LastRefreshed time={time}/> 
    //Note:- As you are not passing any arguments,directly mention getRefresh function
    <Button label="Refresh" onClick={getRefresh} /> 
</div>

LastRefreshedComponent：-

注意：-这里遵循箭头函数的简写语法

 // Also used object destructuring for the props
 const LastRefreshed = ({time}) =>  
             <div>
                <p>Last Refreshed: {time} </p>
            </div>;
    
    export default LastRefreshed;