时间戳

首页 > 解决方案 > React Hooks API 调用 - 它必须在 useEffect 中吗？

reactjs - React Hooks API 调用 - 它必须在 useEffect 中吗？

问题描述

我正在学习 React（带有钩子）并想问一下我们进行的每个 API 调用是否都必须在 useEffect 钩子内？

在我的测试应用程序中，我有一个这样的工作模式：我设置状态，然后在单击按钮后运行一个函数，该函数将获取请求发送到我的 API，并在 .then 块中将接收到的数据附加到状态。

我还有一个 useEffect 钩子，它仅在所述状态更改时运行（使用具有状态值的依赖数组），并且它使用前一个状态中的新数据设置另一个状态。第二个状态是我的应用程序在渲染块中渲染的内容。

这样，我的数据获取实际上发生在单击按钮时运行的函数中，而不是在 useEffect 本身中。它似乎正在工作。

这是一个有效的模式吗？提前致谢！

编辑：示例，这是单击按钮时运行的功能

const addClock = timezone => {
    let duplicate = false;
    selectedTimezones.forEach(item => {
      if (item.timezone === timezone) {
        alert("Timezone already selected");
        duplicate = true;
        return;
      }
    });
    if (duplicate) {
      return;
    }
    let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
    fetch(currentURL)
      .then(blob=>blob.json())
      .then(data => {
        setSelectedTimezones(prevState => [...prevState, data]);
      }
        );
  }

标签： reactjsapireact-hooksuse-effectuse-state

解决方案

是的，在按钮单击等操作上发生的 api 调用不会成为 useEffect 调用的一部分。它将成为您的事件处理函数的一部分。

当你调用 useEffect 时，你是在告诉 React 在刷新对 DOM 的更改后运行你的“效果”函数

useEffect包含我们希望在 React 更新 DOM 后运行的逻辑。因此，默认情况下useEffect，在第一次渲染后和每次更新后都会运行。

注意useEffect：如果事件处理函数未调用异步逻辑，则应始终在其中编写异步逻辑。

推荐阅读