reactjs - 协程作为对 useEffect 的依赖

Question

当前我有以下自定义钩子(Hook):

function useSecurity() {
  const { getAccessTokenSilently } = useAuth0()

  const getAccessToken = async () => {
    return await getAccessTokenSilently()
  }
  
  const getAuthHeader = async () => {
    return { Authorization: `Bearer ${await getAccessToken()}` }
  }
   
  return { getAuthHeader }
}

在我使用它的页面中，我有:

const { getAuthHeader } = useSecurity()

useEffect(() => {
  async function fetchData() {
    ...
    }
  }
  fetchData()
}, [getAuthHeader])

这段代码会导致无限循环页面加载，我假设是因为 getAuthHeader 是一个协程。我知道我不必将它包含在 deps 中(并忽略 eslint 警告)，但是有没有办法可以将它包含在 deps 中而不触发无限循环？

Answer 1

您的代码的问题是 getAuthHeader像钩子(Hook)一样使用，但它实际上是异步方法。您可以尝试这样设置:

function useSecurity() {
  const [token, setToken] = useState('');
  const { getAccessTokenSilently } = useAuth0();

  useEffect(() => {
    getToken = async () => {
      const token = await getAccessTokenSilently();
      setToken(token)
    }

    getToken();
  }, []);
   
  return { token }
}

这是您将 token 存储在 useSecurity 的状态下。钩子(Hook)，然后像这样使用它:

const { token } = useSecurity()

useEffect(() => {
  async function fetchData() {
    ...
    }
  }
  fetchData()
}, [token])