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

Question

我正在学习 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]);
      }
        );
  }

Answer 1

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

When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM

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

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

Answer 2

是的，您可以在 onClick 等事件处理程序中发出 api 请求。

您不想做的是直接在您的功能组件内发出请求（因为它会在每次渲染时运行）。只要请求在另一个函数中，并且您只在真正想要发出请求时才调用该函数，就没有问题。

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

React Hooks API call - does it have to be inside useEffect?

api

reactjs

react-hooks

use-effect

use-state