javascript - 多次使用 ref React hooks

Question

我多次尝试通过 setInterval 方法使用 ref API，但只有一个有效

我创建了一个引用作为数组，然后我尝试使用索引键将函数插入到数组中，但这仅适用于第一次插入我不知道我做错了什么

这就是我所取得的成就

import React, { useState, useEffect, useRef, createRef } from "react";
import ReactDOM from "react-dom";

function Counter() {
  const [countSec, setCountSec] = useState(0);
  const [countMin, setCountMin] = useState(0);

  useInterval(() => {
    setCountSec(countSec + 1); // this working 
  }, 1000, 0);

  useInterval(() => {
    setCountMin(countMin + 1); // it's not working
  }, 1100, 1);

  return <div>
      <h1>{countSec} Secounds</h1>
      <h1>{countMin} Half-Minutes</h1>
  </div>;
}

function useInterval(callback, delay,index){
  const savedCallback = useRef([...Array(2)].map(()=> createRef())); 
  // Remember the latest function.
  useEffect(() => {
      savedCallback.current[index].current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
      let id = setInterval(()=>savedCallback.current[index].current(), delay);
      return () => clearInterval(id);
  });
};

https://codesandbox.io/s/sharp-tree-k39ts

Answer 1

无需尝试记住 useRef 中的多个回调。每次使用 useInterval 时，它都会创建一个新的钩子(Hook)实例。因此，他们将彼此独立工作。这意味着您第一次使用 useInterval 时，它将为您的 setCountSec(countSec + 1) 回调创建一个新的 useRef。第二次使用 useInterval 时，它将为您的 setCountMin(countMin + 1) 创建另一个 useRef 实例。您所要做的就是更改间隔，让第二个间隔每 30 秒更新一次。

import React, { useState, useEffect, useRef, createRef } from "react";
import ReactDOM from "react-dom";

function Counter() {
  const [countSec, setCountSec] = useState(0);
  const [countMin, setCountMin] = useState(0);

  useInterval(() => {
    setCountSec(countSec + 1);
  }, 1000); // update every 1000ms (1sec)

  useInterval(() => {
    setCountMin(countMin + 1);
  }, 30000); // update every 30000ms (30sec)

  return <div>
      <h1>{countSec} Secounds</h1>
      <h1>{countMin} Half-Minutes</h1>
  </div>;
}

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest function.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}