Tengo una barra de CardsContainer ScrollBar una referencia para poder mostrar algunos elementos HTML debajo que permiten un comportamiento de desplazamiento personalizado.

El problema es que, incluso si el estado se actualiza y las tarjetas se vuelven a representar, la ScrollBar de desplazamiento aún recibirá el nodo anterior porque el nodo se está creando mientras se procesa la ScrollBar de desplazamiento. ¿Cómo podría evitar esto?

 return ( <div> <CardsContainer ref={nodeRef}> {cards.map((card, index) => ( <Card {...card} index={index} onClickDismiss={handleDismiss} /> ))} </CardsContainer> <ScrollBar container={nodeRef} /> </> </div> )

dónde

 const handleDismiss = (index: number) => { setCards([...cards.filter((c, i) => i !== index)]) }

PD Según lo solicitado, el código de un controlador de eventos de clic de botón dentro de ScrollBar :

 const onClickRightArrow = () => { isArrowScroll.current = true if (activeIndex < container.children.length - 1) { container.children[activeIndex + 1].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', }) setActiveIndex(activeIndex + 1) } }