除非我强制调整其大小，否则无法使用新元素正确更新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 },

            ]
        }

加载到此responsivegridlayout组件中

<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)


    }
    )
}

当我将元素推入布局的状态时，它会被添加到一个不合适的位置和尽可能小的大小。只有在我手动调整浏览器大小后，它才会正确对齐。

请记住，如果我最初呈现添加的元素，它将呈现在适当的位置

Answer 1

我使用了这个变通方法，但它真的很混乱，我不得不稍微改变一下应用程序的结构

{this.state.addAppModal ? null : <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 >}

基本上，我所做的是在更新为"null“后重新呈现整个responsivegridlayout，因为显然setstate没有正确地更新它