hooks中的依赖欺骗

const Index = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(submitData, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

  const handleCountChange = value => {
    setCount(value);
  };

  const submitData = useCallback(() => {
    console.log(count);
  }, [count]);

  return <InputNumber onChange={handleCountChange} />;
};

这段代码的作用是每隔1s，从控制台打印输入框中的值。但实际上打印值并没有跟随输入框改变，如图。

原因：由于useEffect缺少submitData函数的依赖，导致当count更新后，setInterval仍然调用旧版函数引用。

解决方法：为useEffect缺少submitData函数的依赖。

  useEffect(() => {
    const interval = setInterval(submitData, 1000);
    return () => {
      clearInterval(interval);
    };
  }, [submitData]);