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

Posted 2023-02-14

【中文标题】React Hooks API 调用 - 它必须在 useEffect 中吗？

【英文标题】：React Hooks API call - does it have to be inside useEffect?

【发布时间】：2020-08-04 11:57:38

【问题描述】：

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

【问题讨论】：

你能展示一些代码示例吗？

【参考方案1】：

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

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

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

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

【讨论】：

太棒了，因为它比再次使用 useEffect 容易得多:) 谢谢

@jjcreator 考虑接受答案，如果它有效。谢谢。

【参考方案2】：

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

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

【讨论】：

您介意详细说明一下吗？如果您在 onClick 事件中调用执行 api 渲染的函数，那不是直接在功能组件内部（在功能组件的 return 语句中）吗？

@timman onClick=makeRequest() 会在渲染期间直接调用它（而不是等待点击），是的，那会很糟糕。不过这些都很好：onClick=makeRequest 和 onClick=() => makeRequest()。