Gutenberg setAttributes no actualiza mi área de edición

Question

¿Cómo puedo vincular mis elementos HTML en Gutenberg a una matriz/objeto?

Hola, estoy programando un bloque de Gutenberg ahora y solo quería vincular un objeto a mi bloque pero no se actualiza. Actualmente tengo una lista de

‘s y quería agregarse automáticamente si presiono el botón “¡Haz clic en mí!” Botón.

Lo que hace es… Si presiono ese botón, empuja el nuevo elemento en la matriz, pero el

No se agregan elementos. Si hago clic fuera (si el bloque pierde el foco), se agregan los elementos.

¿Qué hice mal?

edit: props => {
        const { setAttributes, attributes } = props;
        let slides = props.attributes.slides;

        const addSlide = function(event){
            slides.push({ title : 'new' });
            setAttributes({ slides: slides });
        }




        return [
            <InspectorControls key="inspector">
                <PanelBody
                    title={'Slides'}
                    initialOpen={true}
                >

                {slides.map((slide, i) =>
                    <li key={i}>
                    {slide.title}
                    </li>
                )}


                <Button isPrimary onClick={addSlide}>
                    Click me!
                </Button>

                </PanelBody>
            </InspectorControls>,
            <div className={ props.className } key='richtext'>

                {slides.map((slide, i) =>
                    <li key={i}>
                    {slide.title}
                    </li>
                )}

                <Button isPrimary onClick={addSlide}>
                    Click me!
                </Button>

            </div>
        ];
    }

Espero que los elementos de la lista se agreguen dinámicamente mientras se usa fox.

¿Ha sido útil esta solución?