Styles not being updated in gutenberg editor

Question

I have created a gutenberg block, and part of the output is to set the style of the root element. I'm having problems with the style attribute of this root element not being dynamically updated in the gutenberg editor when it changes. My edit function is as follows:

    edit: function( props )
    {
        [...] // initialising some variables

        return el(
            wp.element.Fragment,
            {},
            [...], // InspectorControls, etc.
            el(
                'div',
                {
                    className: 'cms-container ' + getClassName(attr),
                    style: getStyles(attr),
                    state:  JSON.stringify(getStyles(attr)) 
                },
                [...] // Inner blocks, etc.
            )
        );
    },

This works fine on page load, but when I change what getStyles(attr) returns while on the page (through InspectorControls), the style does not change. I've even added an additional "state" attribute to the output, which gets changed as expected, resulting in something like the following:

<div class="cms-container " 
    style="background-size: contain;" 
    state="{&quot;backgroundSize&quot;:&quot;cover&quot;}">

I've changed the background size to cover, which gets updated in the "state" attribute, but not in the style. If I were to save the page at this point, it would render correctly (as background-size:cover) on the next page load.

Is there some sort of caching that React does that I'm missing?

Answer 1

I ended up making an object copy of what getStyles(attr) returns, which solved the problem:

style: $.extend(true, {}, getStyles(attr))

I guess the values were changing after going out of scope or something.