React Hooks API调用 - 是否必须在useEffect内部？

Question

我正在学习使用React（与hooks一起），想问一下我们每次进行的API调用是否都必须在useEffect hook中？

在我的测试应用程序中，我有一个工作模式，如下所示：我设置状态，然后在按钮点击后运行一个函数，该函数向我的API发送get请求，并在.then块中将接收到的数据追加到状态中。

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

通过这种方式，我的数据获取实际上发生在单击按钮时运行的函数中，而不是在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]);
      }
        );
  }

- jjcreator

---

你能展示一些代码示例吗？ - Dennis Vash

Answer 1

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

当您调用useEffect时，您告诉React在刷新DOM后运行您的“effect”函数。

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

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

- Jagrati

---

如果useEffect默认在每次渲染时运行，那么为什么我们还需要单独拥有它们，为什么不能在我们的渲染函数中执行sideEffects？ - Suraj Jain

Answer 2

是的，您可以在事件处理程序（例如onClick）中进行API请求。

您不希望直接在功能组件内部进行请求（因为它将在每次渲染时运行）。只要请求位于另一个函数内部，并且您仅在实际想要发出请求时调用该函数，就没有问题。

- Paul

---

您介意再详细解释一下吗？如果您在onClick事件中调用执行API渲染的函数，那么这不是直接在您的函数组件内部（在函数组件的返回语句中）吗？ - timman

@timman onClick={makeRequest()} 将在渲染期间直接调用它（而不是等待点击），是不好的。这两个都可以：onClick={makeRequest} 和 onClick={() => makeRequest()}。 - Paul