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

Question

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

在我的测试应用程序中，我有一个如下的工作模式：我设置状态，然后单击按钮后，我运行一个函数，向我的 API 发送 get 请求，并在 .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 调用的一部分。它将成为您的事件处理函数的一部分。

\n\n

\n

当你调用 useEffect 时，\xe2\x80\x99 告诉 React 在刷新 DOM 更改后运行你的 \xe2\x80\x9ceffect\xe2\x80\x9d\n 函数

\n

\n\n

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

\n\n

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

\n