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;

Answer 1

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


React.useEffect(() => {

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

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

Reactjs - Call function on startup of application with a functional component

javascript

react-hooks

use-effect