Estoy desarrollando una lista plegable que solo muestra los primeros cinco elementos y un botón para cargar más al principio, y cuando hago clic en el botón para cargar más, se debe mostrar la lista completa. Estoy usando scrollHeight para determinar la altura de esta lista plegable y funciona bien para mostrar los primeros cinco elementos y el botón Cargar más, pero después de hacer clic en el botón Cargar más, la altura de esta lista plegable no cambia y los elementos restantes no se pueden se muestra debido a la restricción de altura. ¿Alguien tiene una idea de cómo solucionarlo? Muchas gracias, realmente me quedé atrapado aquí todo este día.

Así es como esta lista colapsable se parece a la lista colapsable

Este es el código de la lista colapsable

 const Collapsible = ({ showCard, loaded, children }) => { const collapsibleEl = useRef(); const [scrollHeight, setscrollHeight] = useState(); useEffect(() => { setscrollHeight(collapsibleEl.current.scrollHeight); console.log(collapsibleEl.current.scrollHeight); }, [loaded, showCard]); return ( <> <div className={styles.collapsible} ref={collapsibleEl} style={ showCard ? scrollHeight ? { height: `${scrollHeight + 100}px` } : { height: `${collapsibleEl.current.scrollHeight + 100}px` } : { height: "0px" } } > {children} </div> </> ); }; export default Collapsible;