Gutenberg setAttributes 不更新我的编辑区域

Question

如何将 Gutenberg 中的 HTML 元素绑定到数组/对象？

嗨， 我现在正在编程一个古腾堡块，只是想将一个对象绑定到我的块，但它没有更新。 目前，我有一个

列表，并且希望在我按下“点击我！”时自动添加。按钮。

它的作用是......如果我按下该按钮，它将新元素推入数组中，但

元素不会添加。如果我点击离开（如果块失去焦点），则会添加元素。

我做错了什么？

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>
        ];
    }

我期望列表元素在使用 Foxes 时动态添加。

Answer 1

对于任何想知道的人来说，这是一个 React 怪癖。

如果你只是推送一个数组属性，你只是改变一个值而不是创建一个新的属性，所以React无法检测到发生了变化（Source）。

从来源帖子中，将 array.push 替换为 array.concat 以创建新值，然后 setAttribute 将触发重新渲染：

// ❌ Won't trigger re-render
an_array.push( an_array[0] );
setAttributes({ slides: an_array});

// ✅ Will trigger re-render
const nextArray = an_array.concat( an_array[0] );
setAttributes({ slides: nextArray });