在 useEffect 之外进行 React API 调用答案

【问题标题】：React API call outside useEffect在 useEffect 之外进行 React API 调用
【发布时间】：2020-02-14 07:18:31
【问题描述】：

我很想知道在 lifecycle/useEffect 之外发出 API 请求是否是一种有效的调用方式？

https://stackblitz.com/edit/react-useeffect-button有两个功能组件，父组件调用API并将数据传递给child component，最初指定从端点获取数据的限制为2，父组件有一个LoadMore 函数作为prop 与数据一起传递给child component。

使用react-slick slider 显示child component 中的图像和加载按钮onClick 将调用父组件内的函数LoadMore，然后它进行API 调用并将新数据从API 附加到旧数据。加载按钮会将一个图像附加到现有图像。

这是发出 API 请求的好方法还是应该只在生命周期方法中完成？

【问题讨论】：

否，如果这样做，您的 api 调用将作为无限循环运行。测试它并检查网络标签
我检查了网络选项卡，它只为每个 onClick 回调调用一个 API
对 onClick 来说是的，这很好，因为当用户单击按钮时，您会拨打每个电话。但是对于初始获取，如果将代码从使用效果移到外部，它将无限运行

标签： javascript reactjs

【解决方案1】：

这是在 useEffect/lifecycle 之外发出 API 请求的好方法吗？

这取决于您的要求。

应该只在生命周期方法中完成吗？

这取决于您的要求。

在 useEffect 之外发出 API 请求没有任何问题。但是它应该在其他一些函数中完成，否则它将导致请求在每次重新渲染时继续。如果响应保存在状态变量中。

然后就会进入无限循环。

我们什么时候在 useEffect 中发出请求，什么时候通过其他函数发出请求？

在组件初始化时获取数据或发送一些信息的请求应该在 componentDidMount/useEffect 中进行

以及应该在某些操作上发送的请求（例如在您的情况下，onClick），以便根据该事件对其进行命中。

没有好坏之分，一切看你的要求。

【讨论】：

如果您查看 stackblitz 代码，Loadmore 函数仅在单击时调用，而不是在初始渲染或附加状态后的以下重新渲染时调用。我删除了按钮回调的箭头函数，然后它进入了无限循环。
删除箭头函数后，我认为您在 onClick 事件中调用该函数，如 onClick{func()} 导致请求。进入无限循环。只需传递函数。 onClick{func}。同样，这只是我的假设，或者您可以编辑以显示您的代码。
啊，我明白了，当使用箭头语法时，我们需要调用 func() 而当它不使用 => 时，我们必须对 func 进行引用？
是的。你只需要传递函数，孩子就会调用它。

【解决方案2】：

如果您通过 API 调用从初始渲染中获取数据，那么使用生命周期挂钩是一个不错的方法。在您的场景中，您希望在点击按钮时发出 API 请求。在这种情况下，它可以是一个没有任何生命周期钩子方法的简单函数。

这里唯一的关键部分是您要维护状态并从状态渲染视图。

【讨论】：

【解决方案3】：

这取决于您的需求。

如果您认为每当您的参数更改时，就会触发 API 调用。在这种情况下，您应该在 useEffect 中设置 API 调用。

如果您希望在页面加载时触发 API 调用 (ComponentDidMount)。在这种情况下，您应该在 useEffect 中设置 API 调用

否则不需要在useEffect里面设置api调用。

在您的情况下，无需在 useEffect 中设置 API 调用。因为您在用户单击按钮时点击了 API 调用。所以不需要使用useEffect。

【讨论】：