javascript - React component - Errors on React state update on an unmounted component

Question

I'm getting 2 errors while loading my component's code:

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.

and also

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state

After some research I found out that probably wrapping my return statement with UseEffect might solve this issue. However, I could not manage to make the wrap properly. Any clues on how I can manage to do that?

Here is my code, which is giving rise to the errors:

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;

I am calling the component in another class, this way:

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

Ps: CardsContainer is a function that receives a parameter in CardTransition's scope:

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>)
    }

Answer 1

等待大神答复