使用自定义setInterval钩来滴答秒

Question

我正在尝试获取一个使用React Hooks和custom hook Dan created的滴答时钟的示例。我正在摸索试图找出问题所在。

以下作品：

html

取消注释function Clock() { const [currentDate, setDate] = useState(new Date()); // useInterval(() => { // setDate(currentDate.getSeconds() + 1); // }, 1000); return ( <h1>{currentDate.toLocaleTimeString()}</h1> ); } 后，我得到：

  

TypeError：currentDate.toLocaleTimeString不是函数

如果我再移除useInterval(...)，我会得到：

  

对象无效，不能作为React子对象

Answer 1

最初，您的状态是一个Date对象，但是随后您将其变成了整数。

尝试一下：

useInterval(() => {
   setDate(new Date(currentDate.getTime() + 1000));
}, 1000);

---

如果您想在某个时候尝试使用TypeScript，对于防止/捕获此类错误非常有用。在您的原始代码（在问题中发布）上，TypeScript会发出警告：

  

'number'类型的参数不能分配给'SetStateAction'类型的参数。

CRA现在支持TypeScript：

  

create-react-app myapp --typescript

Answer 2

您可以每秒获取当前日期

function Clock() {
  const [date, setDate] = useState(new Date());

  setInterval(() => {
    setDate(new Date());
  }, 1000)

  return (
    <div>
      {date.toLocaleTimeString()}
    </div>
  );
}