使用React制作的数字时钟不工作

Question

我在学Udemy的反应。当我使用旧的React版本时，我的代码正在工作，但是对于新的18.1版本，它不起作用。我正试图建立一个简单的数字时钟，但遗憾的是，没有工作。有人帮忙吗？

​

import React, { useState } from "react";
import logo from './logo.svg';
import './App.css';
function App() {
  setInterval(Time, 1000);
  const date = new Date();
  const time = date.toLocaleTimeString();
  const [uptime, funcTime] = useState(time)
  // event.preventDefault()
  
  function Time() {

    return (
      funcTime(time)
   )
  };
  return (
    <>
      <h1>TIME</h1>
      {uptime}
      {/* <button onClick={Time} type="submit">submit</button> */}
    </>

  )
}
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 1

我已经将时间间隔移到useEffect，尝试如下

import React, { useState,useEffect } from "react";
import logo from './logo.svg';
import './App.css';

function App() {
  const date = new Date();
  const time = date.toLocaleTimeString();
  const [uptime, funcTime] = useState(time);

  useEffect(() => {
    const interval = setInterval(() => {
      const newTime = new Date().toLocaleTimeString();
      funcTime(newTime);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [time]);
  // event.preventDefault()

  return (
    <>
      <h1>TIME</h1>
      {uptime}
      {/* <button onClick={Time} type="submit">submit</button> */}
    </>
  );
}