Reactjs-具有功能组件的应用程序启动时调用函数

问题描述

我的应用程序根据一天中的时间显示问候语，例如“早安” 。我有一个检查时间并根据时间更改问候语的功能。我不能使用componentDidMount，因为它是一个功能组件，所以我正在使用React.useEffect。问题是该应用程序无法在启动时运行，应用程序显示“ Good Morning”（早上好），然后更改为“ Good Afternoon” 会稍有延迟。我该如何消除这种延迟。

根据时间确定问候语的功能

const [currGreeting,setCurrGreeting] = useState(greetings[0]);

//Involves saving to localStorage so the transition can be seamless if the app is exited and returned to

function updateGreeting(){
  time = new Date();
    
  let hour = time.getHours();

  console.log(hour);

  if(12 > hour && hour > 5){
    setCurrGreeting(greetings[0]);
    console.log("Good Morning")

    const curSessionGreeting = JSON.parse(localStorage.getItem("sessionGreeting")) || [];
    if(curSessionGreeting != currGreeting){
      localStorage.setItem("sessionGreeting",JSON.stringify(greetings[0]));
      setCurrGreeting(greetings[0]);
    }
  }
  if((18 > hour && hour > 12) || hour === 12){
    setCurrGreeting(greetings[1]);
    console.log("Good Afternoon")

    const curSessionGreeting = JSON.parse(localStorage.getItem("sessionGreeting")) || [];
    if(curSessionGreeting != currGreeting){
      localStorage.setItem("sessionGreeting",JSON.stringify(greetings[1]));
      setCurrGreeting(greetings[1]);
    }
  }
  if(hour > 18 || (5 > hour && hour > 0)){
    setCurrGreeting(greetings[2]);
    console.log("Good Evening")

    const curSessionGreeting = JSON.parse(localStorage.getItem("sessionGreeting")) || [];
    if(curSessionGreeting != currGreeting){
      localStorage.setItem("sessionGreeting",JSON.stringify(greetings[2]));
      setCurrGreeting(greetings[2]);
    }
  }
}

更新问候语

React.useEffect(() => {
  setInterval(()=>updateGreeting(),1000);
});

应用正在渲染的位置

return (
<div> 
  <div style = {{display: 'flex',fontFamily: 'Work Sans',fontSize: 25,marginBottom: 25,color: '#CDCACA'}}>
    <text>{currGreeting}</text>
   </div> 
 </div> 
 );
};

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）