Warning: Can't perform a React state update on an unmounted component

[kaiyoma]

We use Ant Design 4.x (which uses this library under the hood) and if we try to click an Ant dropdown inside a unit test, we always get this error:

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.
    at Overflow (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-overflow\lib\Overflow.js:36:32)
    at InheritableContextProvider (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-menu\lib\context\MenuContext.js:31:23)
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-menu\lib\Menu.js:55:27
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\antd\lib\menu\index.js:42:24
    at Menu (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\antd\lib\menu\index.js:150:37)
    at NoCompactStyle (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\antd\lib\space\Compact.js:41:23)
    at OverrideProvider (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\antd\lib\menu\OverrideContext.js:23:21)
    at div
    at Align (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-align\lib\Align.js:47:23)
    at DomWrapper (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-motion\lib\DomWrapper.js:20:34)
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-motion\lib\CSSMotion.js:41:32
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-trigger\lib\Popup\PopupInner.js:35:23
    at div
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-trigger\lib\Popup\index.js:32:22
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-util\lib\Portal.js:12:25
    at Trigger (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-trigger\lib\index.js:82:36)
    at Dropdown (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\rc-dropdown\lib\Dropdown.js:33:28)
    at Dropdown (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\antd\lib\dropdown\dropdown.js:30:33)

Glancing at the other open issues, it seems similar to #23.

[uv78]

Same proplem, when the react component is destroyed, a warning will be reported in multiple mode.

version: antd5.14.0;

"rc-select": "^14.11.0",

import { Button } from "antd";
import { useState } from "react";
import PageA from "@/pages/PageA";
import PageB from "@/pages/PageB";

function Home() {

  const [isShow, setShow] = useState(true);
  return <div>
    {isShow ? <PageA/> : <PageB/>}
    <Button onClick={() => {
      setShow(!isShow);
    }}>Play</Button>
  </div>
}

export default Home;

PageA.jsx

import React from "react";
import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

function PageA(){
  return <div>
    <Select mode={'multiple'}>
      <Option value="jack">jack</Option>
      <Option value="lucy">lucy</Option>
      <Option value="yiminghe">123</Option>
    </Select>
  </div>
}

export default PageA;

[MuLoo]

Same error with [email protected]