useEffect 挂钩中的异步任务问题答案

【问题标题】：Problem with asynchronous tasks in useEffect hookuseEffect 挂钩中的异步任务问题
【发布时间】：2021-08-11 20:41:50
【问题描述】：

我有这样的错误：

index.js:1 警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。在 ToDoAdder (http://localhost:3000/static/js/main.chunk.js:193:3)

这是我的代码：

import React, { useState } from 'react';
import { useEffect } from 'react';
import { Trash, Pen, CheckLg, XCircleFill } from 'react-bootstrap-icons';
import { Button } from 'react-bootstrap';
import store from '../../store';

function ToDoAdder({ data }) {
  const [user, setUser] = useState({});

  const { id, title, completed, userId } = data;

  useEffect(() => {
   fetchUsers();
  }, [user]);

  const fetchUsers = async () => {
    const data = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );
    const users = await data.json();
    setUser(users);
    return user;
  };

  const handleTodoRemove = () => {
    console.log(id);
    store.dispatch({ type: 'remove/todo', payload: { id } });
  };

  return (
     // here goes some code
  )
}

export default ToDoAdder;

请帮我解决这个问题

【问题讨论】：

我刚刚测试过，这个视图没有错误，也许你没有正确获得道具。还要从这里删除 [user] useEffect(() => { fetchUsers(); }, [user]);

标签： reactjs use-effect

【解决方案1】：

这不是错误，这是警告。

正如它所说，在异步调用完成之前，您的组件已卸载（为什么，我们不知道，因为我们看不到它是如何使用的）。

在你的情况下，它甚至不像消息暗示的那样表示内存泄漏。

如果你想摆脱警告，你可以使用一个钩子来保护setUser 调用，该钩子检查组件是否在那个时候实际上仍然挂载。 react-use's useMountedState 就是一个这样的可重复使用的钩子。

【讨论】：

我试过了，但没用。我可以用另一种方式解决这个问题吗？
你是如何使用它的？ const isMounted = useMountedState(); ... if(isMounted()) setUser(user);?