在 useEffect 中提示内存泄漏警告问题

我正在尝试根据条件更新一段 UI。条件由单独组件中的数据库调用设置。它有时有效,但通常无效。当它不起作用时,它会收到此错误:

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.

我尝试在useEffect中进行代码清理如下:

const [isPatched, setIsPatched] = useState(false);

useEffect(() => {
    x.Log ? setPatched(true) : setPatched(false);
    return () => {
      setIsPatched(false);
    };
  }, []);

  const setPatched = (patched: boolean) => {
    setIsPatched(patched);
  };

 其他组件调用数据库的方法如下:

  useEffect(() => {
    if (disabled === true) {
      const handle = setTimeout(() => setDisabled(false), 7000);
      return () => clearTimeout(handle);
    }
  }, [disabled]);

  function handleClick() {
   [...]
    const updatePatchedX = async (id: string) => {
      //check if patched x already in db
      const content = await services.xData.getxContent(id);
      const xyToUpdated = content?.p[0] as T;

      if (!xToUpdated.log) {
        // add log property to indicate it is patched and put in DB
        xToUpdated.log = [
          { cId: cId ?? "", uId: uId, appliedAt: Date.now() },
        ];

        if (content) {
          await services.xData
            .updateOTxBook(id, content, uId)
            .then(() => {
              console.log("done");
              setPatched(true);
              setDisabled(true);
            });
        }
      }
    };

    updatePatchedX(notebookID);
  }

UI仅在刷新时固定,而不是立即固定,正如useEffect应该实现的那样?不知道问题出现在哪里。

你可能感兴趣的:(react.js,前端,前端框架)