React Grid Layout - 屏幕上显示的网格项目，即使不在布局中答案

【问题标题】：React Grid Layout - Grid Item shown on screen even though not within layoutReact Grid Layout - 屏幕上显示的网格项目，即使不在布局中
【发布时间】：2020-08-05 19:20:14
【问题描述】：

我正在使用 react-grid-layout 来尝试制作可调整大小的网格。我还尝试添加删除网格项的功能。但是，在删除网格项（实际上只是从传入的布局对象中删除该项）后，网格项将更改为可能的最小尺寸，但仍留在屏幕上。这有什么原因吗？输入图片说明在这里

从布局中移除之前

从布局中移除后

这是布局对象：

之前

            { i: 'card', x: 0, y: 0, w: 5, h: 8, minH: 8, },
            { i: 'calendar', x: 0, y: 8, w: 5, h: 25 },
            { i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
            { i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
            { i: 'activities', x: 7, y: 18, w: 3, h: 15 },

删除后

            { i: 'calendar', x: 0, y: 8, w: 5, h: 25 },
            { i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
            { i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
            { i: 'activities', x: 7, y: 18, w: 3, h: 15 },

移除后以及调用 onLayoutChange 时

            { i: 'card', x: 0, y: 0, w: 1, h: 1 },
            { i: 'calendar', x: 0, y: 1, w: 5, h: 25 },
            { i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
            { i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
            { i: 'activities', x: 7, y: 18, w: 3, h: 15 },

为什么被删除的网格项仍然出现在屏幕上？我通过从布局对象中删除该网格项来删除它 onClick 的“X”按钮，但是，在删除它之后，立即调用 onLayoutChange 方法，并将该“卡片”添加回布局对象，只需最小的尺寸。这有什么原因吗？我是使用 react-grid-layout 的新手，如果我做错了什么，请告诉我！

这是我的网格代码

const layout = useSelector(state => state.layout.project.pre_layout)
// this layout is the layout object shown above, taken from redux store

const onLayoutChange = (layout, layouts) => {
    console.log(layout);
    console.log(layouts);
    dispatch({ type: "LAYOUT_ONCHANGE", layout: layouts, page: 'project' })
    // this dispatch updates the redux store with the new layout
}

        <ResponsiveGridLayout className="layout" layouts={layout}
            onLayoutChange={(layout, layouts) =>
                onLayoutChange(layout, layouts)
            }
            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
            cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
            rowHeight={row_height}
            compactType={'vertical'}
            preventCollision={false}>
        /* content here */
        </ResponsiveGridLayout>

谢谢大家

【问题讨论】：

标签： reactjs react-grid-layout

【解决方案1】：

有点晚了，但我自己也遇到了这个问题，所以我想把我的发现写出来！

如果您只是删除项目的布局细节但将其保留在内容中 - 它会保留在网格上但会重置为默认位置和尺寸。

要完全移除一个项目，您需要将它从布局和内容中移除。内容是您在 /* 此处显示的内容 */

【讨论】：