古腾堡 setAttributes 不更新我的编辑区域

Question

如何将古腾堡中的 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>
        ];
    }

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

Answer 1

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

\n

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

\n

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

\n

// \xe2\x9d\x8c Won\'t trigger re-render\nan_array.push( an_array[0] );\nsetAttributes({ slides: an_array});\n\n// \xe2\x9c\x85 Will trigger re-render\nconst nextArray = [...slides];\nnextArray[targetSlide] = \'lorem ipsum\'\nsetAttributes({ slides: nextArray });\n

\n