反应。 useEffect 挂钩内的 API 请求（调用异步函数）

Question

我正在 React 中构建一个项目，我得到了一个包含多个组件的组件。该组件需要在安装时以及随后子组件发生更改时获取数据。首先，我尝试使用带有“shouldRefetch”依赖项的 useEffect 钩子，如下所示：

[shouldRefetch, setShouldRefetch] = useState(false);

useEffect(() => {
    fetchData();
}, [shouldRefetch])

const fetchData = async () => {
    // fetchingdata.. 
    setData(response.data); //useState hook
    setShouldRefetch(false);
}

const onFetch = () = {
    setShouldRefetch(true);
}

//child component

return (
 <Child onFetch={onFetch} />
)

在这段代码向我的 API 发送了太多请求之后，我尝试将 fetchData 函数传递给子组件，并从 useEffect 中删除了依赖关系：

useEffect(() => {
    fetchData();
}, [])

// ...

return (
 <Child fetchData={fetchData} />
)

这解决了大多数重复的 api 调用，但当页面加载时，我仍然收到在网络选项卡（chrome 开发工具）中发送的两个 api 调用。我知道这是因为 useEffect 但我不明白为什么。谁能帮我理解这个问题吗？

提前致谢

我尝试在页面加载时获取数据，并期望它仅发生一次，并且仅在我调用异步函数来获取数据时才发生。我只是不明白为什么我看到一个请求在网络选项卡中被触发两次。

Answer 1

您可能已启用“React.StrictMode”。在这种情况下，组件上的每个 useEffect() 默认情况下都会在挂载时运行两次。您可以在您的 index.tsx 文件（用于打字稿）中找到此配置。您可以通过删除 StrictMode 包装器来解决此问题，但这不是最佳解决方案。 因为你可以采取一些技巧来防止 api 调用运行两次，

  let isFetching = false;

  const fetchData = () => {
    fetch("/dummy.json").then((res) => {
      console.log(res);
    });
  };

  useEffect(() => {
    if (isFetching) return;
    fetchData();
    isFetching = true;
  }, []);

在这里，我们在 useEffect() 之外声明了一个变量，默认值为 false。执行 fetch 函数后，我们设置了 isFetching = true。 当我们在 useEffect() 的第一行检查 isFetching 时，这将阻止 fetchData() 函数第二次运行，并且您的 fetch api 调用只会在组件安装时运行一次。