React useEffect() 无限循环答案

【问题标题】：React useEffect() Infinite loopReact useEffect() 无限循环
【发布时间】：2020-04-14 10:11:42
【问题描述】：

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

我正在阅读其他问题，例如 this one，为了避免 useEffect() 无限循环，我必须在末尾添加一个空数组，但它仍然不起作用。

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

src/components/Users.js

import React, { useState, useEffect, useContext } from "react";
import GlobalContext from "../context/Global/context";

export default () => {
  const context = useContext(GlobalContext);
  const [users, setUsers] = useState([]);

  async function getUsers() {
    context.setLoading(true);
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (response.ok) {
        context.setLoading(false);
        const data = await response.json();
        setUsers(data);
    } else {
        console.error('Fetch error');
    }
  }

  useEffect(() => {
    getUsers();
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

这是不工作的Sandbox，我不知道为什么会发生这种情况，感谢任何 cmet。

【问题讨论】：

嗨 Maramal，检查我的解决方案，如果有帮助，请告诉我。
这能回答你的问题吗？ React hook useEffect runs continuously forever/infinite loop

标签： javascript reactjs react-hooks

【解决方案1】：

问题是您不断安装然后卸载用户组件。 <App> 渲染，加载是假的，所以它渲染 <Users>。由于用户渲染了它的效果，它立即将加载设置为 true。

由于加载现在为 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 并将数据作为道具传递。

【讨论】：

【解决方案2】：

我认为问题是因为

context.setLoading(false);

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

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

【讨论】：