javascript - Reactjs - 使用功能组件在应用程序启动时调用函数

Question

我的应用程序会根据一天中的时间显示诸如“早安”之类的问候语。我有一个功能可以检查时间并根据现在的时间更改问候语。我不能使用componentDidMount，因为它是一个功能组件，所以我正在使用React.useEffect. 问题是这不会在启动时运行，应用程序显示“早安”会有一点延迟，然后会变为“下午好”。我怎样才能消除这种延迟。

根据时间确定问候的功能

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;

标签： javascriptreactjsreact-hooksuse-effect

Answer 1

您应该updateGreeting在执行之前运行一个，setInterval因为这会将第一次执行延迟updateGreeting一秒1000ms，它会异步执行：

React.useEffect(() => {

   updateGreeting()//first execution
  
   setInterval(()=>updateGreeting(), 1000);
},[]);