React-grid-layout не обновляется должным образом с новыми элементами, если я не заставлю его изменить размер

Question

У меня есть следующий макет в моем состоянии

layouts: {
            //x = starting from 0 horizontal position
            //y = starting from 0 vertical position
            //h = height of the el
            //minW = position relative to x width, from x(pos1) to x(pos2)
            lg: [
                { i: 'a', x: 0, y: 0, w: 6, h: 6.45 },
                // {i: 'b', x:6, y:0, w:6, h:6.45}
            ],
            md: [
                { i: 'a', x: 0, y: 0, w: 5, h: 4.35 }
                // {i: 'b', x:6, y:0, w:5, h:4.35}
            ],
            sm: [
                { i: 'a', x: 0, y: 0, w: 1, h: 2 },

            ],
            xs: [
                { i: 'a', x: 0, y: 0, w: 1, h: 2 },

            ],
            xxs: [
                { i: 'a', x: 0, y: 0, w: 1, h: 2 },

            ]
        }

Загружен в этот компонент responseivegridlayout

<ResponsiveGridLayout className="layout"
                        layouts={this.state.layouts}
                        margin={[0, 0]}
                        breakpoints={{ lg: 1300, md: 1000, sm: 768, xs: 480, xxs: 0 }}
                        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}>
                        {_.map(this.state.layouts.lg, el => this.createElement(el))}
                    </ResponsiveGridLayout >

, он отлично работает, но всякий раз, когда я хочу добавить новый элемент в макет в эта функция

closeAddModal = (el) => {
    console.log(el.target.getAttribute('name'))
    this.setState({
        addAppModal: false
    })

    var layouts = this.state.layouts;

    layouts.lg.push({ i: 'b', x: 6, y: 0, w: 6, h: 6.45 })
    // layouts.md.push({i: 'b', x:6, y:0, w:5, h:4.35})

    this.setState({
        layouts: layouts
    }, () => {
        console.log(this.state.layouts)


    }
    )
}

Когда я помещаю sh элемент в состояние макета, он добавляется в неправильной позиции и в наименьшем возможном размере. И он будет правильно выровнен только после того, как я вручную изменю размер браузера.

Имейте в виду, что, если я визуализирую добавленный элемент изначально, он отображается в правильном положении

Answer 1

Я вроде использовал это как обходной путь, но он действительно грязный, и мне пришлось немного изменить структуру приложения обновляется с помощью «null», потому что, очевидно, setstate не обновляет его должным образом