这是在组件中调度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中的异步函数以避免此错误。