忽略 useEffect 依赖项中的访问令牌答案

【问题标题】：Ignore access token in useEffect dependency忽略 useEffect 依赖项中的访问令牌
【发布时间】：2020-10-08 01:01:23
【问题描述】：

我想在组件的初始渲染中获取数据。获取需要一个访问令牌，该令牌存储在上下文中并可以通过自定义挂钩访问。刷新访问令牌时，我不希望 useEffect 再次运行。我不能使用Memo 访问令牌，因为在同一页面上，我有一个保存按钮也可以进行获取。保存时，我想使用最新的访问令牌以防它被刷新。所以简而言之，如何忽略 useEffects 中的 accessToken 依赖，但在 useEffect 运行时仍然使用最新值？

  const accessToken = useAccessToken();
  useEffect(() => {
    const fetchData = async () => {
      const taskResult = await fetch("/tasks", {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json'
        }
      });
      setTasks(taskResult);
    };
    fetchData();
  }, []);  // eslint warning because it wants accessToken as a dependency

【问题讨论】：

看起来你想用你的 fetchData 函数关闭访问令牌。将 fetchData 函数移出 useEffect 并用 useCallback 包装它。然后，您应该能够在 useEffect 调用中使用返回的回调，而无需将令牌作为依赖项。
令牌不会是导致相同问题的回调的依赖项吗？

标签： reactjs react-hooks access-token use-effect

【解决方案1】：

您可以确保使用保存在另一种状态的标志来获取数据。所以这就是我个人会做的：

const accessToken = useAccessToken();
const [fetched, setFetched] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setFetched(true);
      const taskResult = await fetch("/tasks", {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json'
        }
      });
      setTasks(taskResult);
    };
    if(!fetched) fetchData();
  }, [accessToken, fetched]);

这样，您将始终拥有最新的 accessToken 来获取数据。

【讨论】：