API函数的useEffect或useMemo



这是在组件中调度API调用的最佳挂钩。通常我在第一次渲染时使用useMemo来调用API,如果我需要额外的副作用,则使用useEffect,这是正确的吗?因为有时我会得到以下错误:

''index.js:1警告:在呈现其他组件(PaySummary(时无法更新组件(Inscriptions(。若要在PaySummary中定位错误的setState((调用,请按照…"中所述执行堆栈跟踪

当我路由到一个组件并快速更改到另一个组件时,就会发生这种情况;影响";如果我返回到它按预期正确呈现的上一个组件,则会出现一般的问题。那么我该怎么做呢?

调用API是一种副作用,您应该使用useEffect,而不是useMemo

根据useEffect:的React文档

React组件中的数据获取、设置订阅和手动更改DOM都是副作用的例子。无论您是否习惯于将这些操作称为"副作用"(或仅称为"效果"(,您都可能以前在组件中执行过这些操作。

根据useMemo:的React文档

请记住,传递给useMemo的函数在渲染过程中运行。不要在那里执行渲染时通常不会执行的任何操作。例如,副作用属于useEffect,而不是useMemo。

在渲染或使用useMemo时执行这些副作用(和修改状态(是您遇到所提到错误的原因。

基本上我更喜欢以componentDidMount的方式使用useEffect,没有像下面那样的依赖关系


useEffect(() => {
// Api call , or redux async action here...
}, [])

用于在组件装载状态下调用api。大多数时候,我发现自己使用useMemo在功能组件渲染级别存储数据,防止变量重新创建,并在渲染之间保留创建的数据,但依赖项更改除外。

但对于您问题的上下文,有一个名为useLayoutEffect的钩子,它主要用于在绘制DOM之前进行的操作,但正如我所说,在项目中的大多数时候,我发现在一个没有依赖关系的简单useEffect中调用api,也就是您的组件的挂载,以便加载组件所需的数据!

虽然有点晚,但上面提到的一切都是完全正确的;错误

''index.js:1警告:在呈现其他组件(PaySummary(时无法更新组件(Inscriptions(。若要在PaySummary中查找错误的setState((调用,请按照…"中所述执行堆栈跟踪

与API调用是异步的这一事实有关,当您快速更改页面时,set状态调用(我假设用于更新从API调用返回的数据(仍在等待从API返回数据后被调用。因此,您必须始终清理useEffect中的异步函数以避免此错误。

相关内容

  • 没有找到相关文章

最新更新