React Lifecycles 管理具有变化值的间隔

Question

在我的一个组件中，我有一个 useEffect 设置，其中设置了一个间隔来获取函数。

基本设置如下：

...

const token = useToken() // custom hook that updates whenever access_token updates

const fetchData = useCallback(() => {
  callAPI(token)
}, [token])

useEffect(() => {
  if (!token) return

  fetchData()

  const interval = setInterval(fetchData, 60000)

  return () => {
    clearInterval(interval)
  }
}, [token]}

...

它应该每 60 秒 fetchData 一次。

它还需要做的（它不需要做的）是每当 token 更新时，它都应该考虑到这一点。

我目前尝试解决的问题是清除令牌更改的时间间隔并重新开始该过程。但我认为我在上述尝试中处理不当。

知道如何正确完成此操作吗？

Answer 1

唯一缺少的是 fetchData 应该添加到依赖项数组以确保 useEffect 使用更新的回调

useEffect(() => {
    if (!token) return

    fetchData()

    const interval = setInterval(fetchData, 60000)

    return () => {
        clearInterval(interval)
    }
}, [token, fetchData])

但是你也可以把fetchData(这次fetchData不用跟useCallback一起背)函数移到useEffect里面，这样你只能将令牌作为依赖项：

useEffect(() => {
    const fetchData = () => {
        if(!token) return;

        callAPI(token)
    };

    fetchData();
    const interval = setInterval(fetchData, 60000)

    return () => {
        clearInterval(interval)
    }
}, [token])

编辑：您可以通过以下方式从 useEffect 中删除令牌：

const fetchData = useCallback(() => {
    if(!token) return; // moved the token check here
    
    callAPI(token)
  }, [token])
  
useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 60000)

    return () => {
        clearInterval(interval)
    }
}, [fetchData])

React Lifecycles 管理具有变化值的间隔

React Lifecycles managing intervals with changing values

reactjs

react-hooks

setinterval

use-effect

usecallback