多次使用 ref 反应钩子

Question

我正在尝试使用 setInterval 方法多次使用 ref API，但只有一个在工作

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

这是我取得的成就

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时，它都会创建钩子的新实例。因此，它们将彼此独立工作。这意味着您第一次使用useInterval它将为您的setCountSec(countSec + 1)回调创建一个新useRef。第二次使用useInterval它将为您的setCountMin(countMin + 1)创建另一个useRef实例。您所要做的就是更改interval，让第二个每 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]);
}

Answer 2

根据您的评论

您需要在countSec后更新countMin

这是一个工作代码

function Counter() {
const [countSec, setCountSec] = useState(0);
const [countMin, setCountMin] = useState(0);
useEffect(()=>{
setInterval(() => {
setCountSec(countSec + 1); // this working 
}, 1000);
setInterval(() => {
setCountMin(countMin + 1); // it's not working
}, 1100);
}, [])

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

代码上的指针很少是每次重新渲染都会调用整个函数并创建一个新的 setInterval......

useEffect(()=>{},[])相当于componentDidMount

如果你想在没有这个useEffect(()=>{},[])的情况下跟随你的模式，你可以使用setTimeout