在本地存储中存储我的反应应用程序的布局不起作用

Question

我正在使用 react-grid-layout 并创建一些可拖放且可调整大小的网格。

所以我能够实现它并且工作正常。

我的 UI 就像我有两个选项卡，每个选项卡都有一些网格，所以当我从一个选项卡移到另外两个选项卡时，我会显示该选项卡的网格。

我正在尝试做什么

在更改布局时，我想将该布局存储到本地存储，以便当我再次刷新或打开该选项卡时，网格的形成应该是我更改的那个。

所以如前所述in library I am using this

所以我所做的是，每当 onLayoutChange 发生时，我正在存储关于我的 active_tab 的布局，当我从一个选项卡切换到另一个选项卡时，我正在检查本地存储并匹配哪个选项卡处于活动状态并获得特定布局。
但这并没有发生，它只是采用了基本布局。

我做了什么

    function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls =
        JSON.parse(
          global.localStorage.getItem(localStorage.getItem("active_tab"))
        ) || {};
    } catch (e) {
      /*Ignore*/
    }
    return ls[key];
  }
}
function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      localStorage.getItem("active_tab"),
      JSON.stringify({
        [key]: value
      })
    );
  }
}

布局的onchange函数

 const onLayoutChange = (layout, layouts) => {
 saveToLS("layouts", layouts);
 console.log("onchange");
 setlayouts({ layouts });
  };

编辑/更新

我已经更新了我的代码沙箱，因为之前它在控制台上进行布局，undefined 现在它在进行布局，Here is the updated code sandbox

Answer 1

解法是运行 generateDOM每个active_menu一次：

  const [DOM, setDOM] = useState(null)  

  useEffect(() => {
    setDOM(generateDOM(data1[active_menu].comp_data))
  }, [data1, active_menu]);

data1 也应该在依赖项中，因为在添加和删除元素时需要重新计算 "DOM"。

渲染：

  <ResponsiveReactGridLayout
    {...props}
    onLayoutChange={(layout, layouts) => onLayoutChange(layout, layouts)}
    layouts={layouts}
    cols={{ lg: 12, md: 4, sm: 6, xs: 4, xxs: 2 }}
  >
    {DOM} 
  </ResponsiveReactGridLayout>

我也把localStorage.getItem("active_tab")改成了active_menu

codesandbox

在本地存储中存储我的反应应用程序的布局不起作用

Storing layout for my react app in local storage not working

javascript

local-storage

reactjs

react-grid-layout

react-hooks