reactjs - 侧边栏打开时反应网格布局不重绘

Question

网格布局网格不会改变形状，除非有窗口更新，例如打开开发者工具。侧边栏打开时状态正在发生变化。

<GridLayout>当我没有设置宽度属性但没有宽度时，不会发生此问题。

我附上了 3 个屏幕截图来显示问题

1. 侧边栏已关闭。

2. 侧边栏打开，但网格位于其下方。

3. 打开开发者工具（或者甚至移动开发者工具，如果它们打开的话）会将网格捕捉到正确的位置。

我尝试了许多变体，包括可调整大小的网格，但无济于事。

相关代码为：

import RGL, { WidthProvider, Layout } from "react-grid-layout";
import "../../../../../../node_modules/react-grid-layout/css/styles.css";
const GridLayout = WidthProvider(RGL);

  const defaultProps = {
    className: "layout",
    items: 20,
    rowHeight: 30,
    onLayoutChange: function(layout: any) {},
    cols: 12,
  };

  const [layoutState, setLayoutState] = useState(defaultProps);

  const generateDOM = () => {
    return _.map(_.range(layoutState.items), (i) => (
      <div key={i} style={{ border: "2px solid red", margin: "5px" }}>
        <span className="text">{i}</span>
      </div>
    ));
  };

  const generateLayout = () => {
    const p = layoutState;
    return _.map(new Array(p.items), function(item, i) {
      const y = _.result(p, "y") || Math.ceil(Math.random() * 4) + 1;
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6) * (y as number),
        w: 2,
        h: y,
        i: i.toString(),
      };
    });
  };

  const [layoutS, setLayoutS] = useState(generateLayout());

  const onLayoutChange = (layout: any) => {
    layoutState.onLayoutChange(layout);
  };

  return (
    <>
      <SidebarMetrics />
      {console.log("Drawing")}
      <GridLayout
        layout={layoutS as Layout[]}
        onLayoutChange={onLayoutChange}
        {...state}
        style={{ width: "100%" }}
      >
        {generateDOM()}
      </GridLayout>
    </>
  );