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

如何解决React Lifecycles 管理具有变化值的间隔

在我的一个组件中，我有一个 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 更新时，它都应该考虑到这一点。

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

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

解决方法

唯一缺少的是 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,[token])

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

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