Question

我正在尝试复制一个个人项目以在加载数据提取时设置Spinner加载器，但之前又遇到另一个错误。

我在阅读诸如this之类的其他问题时，为了避免=IFERROR(ARRAYFORMULA( IF( VLOOKUP(A2:A, Sheet2!A2:D, 2, FALSE) = "OK", VLOOKUP(A2:A, Sheet2!A2:D, 3, TRUE) ) ))无限循环，我必须在末尾添加一个空数组，但仍然行不通。

这是我的代码，尽管添加了空数组，但它只是无限地重新渲染。

src / components / Users.js

useEffect()

这是无法正常工作的this one，我不确定为什么会这样，任何评论都值得赞赏。

Answer 1

问题是您先挂载然后再挂载Users组件。 <App>呈现，而load为false，因此呈现<Users>。由于用户渲染了效果，因此将立即运行，将加载设置为true。

由于现在是正确的加载，因此<App>会重新呈现，并且不再具有<Users>组件。您的操作没有拆卸逻辑，因此提取将继续进行，完成后，它将装入设置为false并将用户设置为获取的数据。尝试设置用户实际上会在控制台中导致此错误，指出已卸载用户：

proxyConsole.js:64 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in _default (at App.js:25)

现在加载已设置为false，该过程将重复。

此问题的解决方案是使数据加载位于保持安装状态的组件中。可以将App更改为不卸载用户，或者将获取权限移至App并将数据作为道具传递。

Answer 2

我认为问题是由于

context.setLoading(false);

只需从您的getUsers函数中删除此行，并添加一个单独的useEffect钩子即可。

useEffect(() => {
   context.setLoading(false);
}, [users]) //Run's only when users get changed

反应useEffect（）无限循环

src / components / Users.js

2 个答案: