API 函数的 useEffect 或 useMemo？

Question

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

Inscriptions'''index.js:1 警告：渲染不同组件 ( ) 时无法更新组件 ( ) PaySummary。要找到内部错误的 setState() 调用PaySummary，请按照 ...'''' 中所述跟踪堆栈跟踪

当我路由到一个组件并快速更改为另一个组件时，就会发生这种情况，它不会“影响”一般行为，因为如果我返回到上一个组件，它会按预期正确呈现。那我该怎么办呢？

Answer 1

调用 API 会产生副作用，您应该使用useEffect，而不是useMemo

\n

根据 React 文档useEffect：

\n

\n

数据获取、设置订阅以及手动更改 React 组件中的 DOM 都是副作用的例子。无论您\xe2\x80\x99是否习惯于调用这些操作\xe2\x80\x9c副作用\xe2\x80\x9d（或者只是\xe2\x80\x9ceffects\xe2\x80\x9d），您\xe2\x80 \x99 之前可能已经在您的组件中执行过它们。

\n

\n

根据 React 文档useMemo：

\n

\n

请记住，传递给 useMemo 的函数在渲染期间运行。不要\xe2\x80\x99 在那里做任何你在渲染时通常不会做的事情。例如，副作用属于 useEffect，而不是 useMemo。

\n

\n

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

\n

Answer 2

useEffect基本上我宁愿以不依赖的方式使用componentDidMount，如下所示

useEffect(() => {

  // Api call , or redux async action here...

}, [])

用于在组件挂载状态下调用 api。大多数时候，我发现自己用于useMemo在功能组件渲染级别记忆数据，以防止变量重新创建并在渲染之间保留创建的数据（依赖项更改除外）。

但对于你的问题的上下文，有一个名为 hook 的钩子useLayoutEffect，它主要用于在绘制 DOM 之前发生的操作，但正如我所说，基本上在项目中的大部分时间里，我发现在一个简单的、useEffect没有依赖关系的情况下调用 api，即已安装您的组件，以便加载组件所需的数据！