除非我强制调整其大小，否则 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 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" 更新后重新渲染整个响应式网格布局，因为显然 setstate 没有正确更新它

除非我强制调整其大小，否则 React-grid-layout 无法使用新元素正确更新

React-grid-layout not updating properly with new elements unless I force its resizing

reactjs

react-grid-layout