React时钟应用useEffect依赖缺失报错，求解决方案

首先纠正你代码里的一个基础错误：useState返回的是数组，而非对象，所以应该用数组解构const [time, setTime] = useState(new Date())，原代码的对象解构写法会直接导致功能异常。

针对react-hooks/exhaustive-deps的报错，下面提供三种可行的修复方案：

方案一：将refreshClock移至useEffect内部 #

把函数定义放到useEffect回调里，这样无需将其加入依赖数组，同时保证定时器仅在组件挂载时创建一次：

import { useState, useEffect } from "react";

function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    // 内部定义函数，避免外部依赖
    function refreshClock() {
      setTime(new Date());
    }
    const timerID = setInterval(refreshClock, 1000);
    // 组件卸载时清理定时器
    return () => clearInterval(timerID);
  }, []); // 依赖数组为空，仅挂载时执行

  return <span>Time : {time.toLocaleTimeString()}</span>;
}

export default App;

方案二：用useCallback缓存函数引用 #

如果需要在组件其他地方复用refreshClock，可以用useCallback包裹函数，固定其引用地址，再加入依赖数组：

import { useState, useEffect, useCallback } from "react";

function App() {
  const [time, setTime] = useState(new Date());

  // useCallback缓存函数，仅当依赖变化时重新创建
  const refreshClock = useCallback(() => {
    setTime(new Date());
  }, [setTime]); // setTime是useState返回的稳定函数，依赖数组可安全保留

  useEffect(() => {
    const timerID = setInterval(refreshClock, 1000);
    return () => clearInterval(timerID);
  }, [refreshClock]); // 加入缓存后的函数作为依赖

  return <span>Time : {time.toLocaleTimeString()}</span>;
}

export default App;

方案三：直接在setInterval中调用setTime #

对于简单的更新逻辑，无需单独定义函数，直接在定时器回调中执行setTime，简化代码同时避免依赖问题：

import { useState, useEffect } from "react";

function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(timerID);
  }, []);

  return <span>Time : {time.toLocaleTimeString()}</span>;
}

export default App;

内容的提问来源于stack exchange，提问作者Domzxc23