如何清除已启动并运行setInterval的函数的Interval？

Question

setWorker值为“0”时如何停止加载FriendList？

const [worker, setWorker] = useState('1');
 
function start() {
 setInterval(loadFriendList,5000);
}
useEffect(start, []);
 
function n() {
  setWorker("0");
  Alert.alert('check', worker);
}

Answer 1

不要使用字符串作为数字，这是不必要的麻烦。

使用

useRef

钩子来存储 intervalID .

每当工人改变时，这个

useEffect

钩子就会触发。

在

[]

中看到我们添加了 worker 变量。它被称为依赖数组。基本上你是说 useEffect 查看这些变量并在有任何变化时触发

useEffect(() => {
  if(worker == 0) intID.current && clearInterval(intId.current)
},[worker])

useRef

挂钩保留您在页面加载时设置的间隔，以唯一标识和运行像

clearInterval()

的方法在未来

最后它应该看起来像

const [worker, setWorker] = useState(1);
const intId = useRef(null)
 
useEffect(() =>{
  intId.current = setInterval(loadFriendList,5000);
  return () => clearInterval(intId.current)
}, []);
 
useEffect(() => {
  if(worker == 0) intId.current && clearInterval(intId.current)
},[worker])

Answer 2

const [worker, setWorker] = useState('1');
const [intervalId, setIntervalId] = useState(null);

function start() {
  setIntervalId(setInterval(loadFriendList, 5000));
}

useEffect(start, []);

function n() {
  setWorker("0");
  clearInterval(intervalId);
  Alert.alert('check', worker);
}