React 组件 - 未安装组件的 React 状态更新错误

如何解决React 组件 - 未安装组件的 React 状态更新错误

加载组件代码时出现 2 个错误：

警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

还有

警告：无法在现有状态转换期间更新（例如在 render 内）。 Render 方法应该是 props 和 state 的纯函数

经过一些研究，我发现用 UseEffect 包装我的 return 语句可能会解决这个问题。但是，我无法正确地进行包装。关于我如何做到这一点的任何线索？

这是我的代码，它引起了错误：

export function CardTransition({ cards,CardsContainer }) {  
    const [cardss,setCards] = useState(cards);
    const [ expandedCardId,setExpandedCardId ] = useState();

    useEffect(() => { setCards(cards) },[cards]);

    function handleExpandClick(expanded,id) {
        setExpandedCardId(expanded ? id : undefined);
    }

    function GetExpandedContent() {
        let item;
        for(let i=0; i<cardss.length; i++)
        {
            item = cardss[i].find(item => item && item.type.displayName === expandedCardId);
            if (item) break;
        }
        return item ? React.cloneElement(item,{ onExpandClick: handleExpandClick,isExpanded: true },undefined) : <span/>;
    }

    return <SwitchTransition mode="out-in">
        <CSSTransition key={expandedCardId ? expandedCardId : ""} classNames="transitionCardsExpand" timeout={{ enter: 300,exit: 300 }} >
            {(!expandedCardId) ?
                CardsContainer(handleExpandClick)
                : GetExpandedContent()
            }
        </CSSTransition>
    </SwitchTransition> 
}

export default CardTransition;

我在另一个类中调用组件，这样：

return <CardTransition cards={cards} CardsContainer={cardsContainer} />;

Ps: CardsContainer 是一个接收 CardTransition 范围内参数的函数：

function cardsContainer(handleExpandClick) { 
        return(
        <div className={"container-fluid pl-0 pr-0"}>
            <div className="row ml-0 mr-n3">
                <div className="col-md-12 col-lg-2 mb-3 pl-0">
                    <div>
                        <OtherComponent id={id} rowVersion={rowVersion} />
                    </div>
                </div>
                {cards.map((group,x) =>
                    <div key={x} className="col-md-12 col-lg-5 pl-0">
                        {group.map((item,y) => {
                            if (!item) return null;
                            return (<div key={y} className="row">
                                <div className="col-md-12 mb-3">
                                    <Card>{React.cloneElement(item,{ onExpandClick: handleExpandClick },undefined)}</Card>
                                </div>
                            </div>);
                        })}
                    </div>
                )}
            </div>
        </div>)
    }