小编jjc*_*tor的帖子

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