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

我正在使用和创建一些网格，这些网格可以拖放，也可以调整大小

所以我能够做到这一点，而且效果很好

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

我想做的事

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

所以根据上面提到的

• 因此，我所做的是，当发生

  onLayoutChange

  时，我存储与

  active\u选项卡相关的布局，当我从一个选项卡更改为另一个选项卡时，我检查本地存储并匹配哪个选项卡处于活动状态并获取特定布局

• 但这并没有发生，它只是采取了基本的布局

我所做的

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

编辑/更新

---

我已经更新了我的代码沙盒，就像之前它在控制台ans上采用布局一样

未定义

现在它采用布局，

解决方案将针对每个

活动菜单运行
generateDOM
：

  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>  

onLayoutChange（布局，布局）}
布局={layouts}
cols={{lg:12，md:4，sm:6，xs:4，xxs:2}
>
{DOM}

我还将
localStorage.getItem（“活动选项卡”）更改为
active\u菜单

将
控制台.log（布局）
放在
onLayoutChange
内部。这是调试的第一步。查看
布局
对象是否符合您的预期。是的，我已经完成了所有这些。您可以共享那些
日志
的结果吗？您是否看到了预期的正确值？这些细节有助于加快调试速度。@LakshyaThakur我可以分享，但你也可以检查，我有这些东西的共享代码沙盒链接，你可以在这里查看日志。当我检查时，它是未定义的，我不知道怎么做？@LakshyaThakur我已经编辑了我的帖子，并在这里包含了更新的代码沙盒。控制台显示了你可以检查的布局。先生，我尝试了你的代码，它工作得很好，但我不得不问一个问题，即如何进行条件渲染。如果case
empName==“steve
那么w=6
else
4我尝试了
if（item.empName==“steve”）{return{x:（I*2）%12，y:Math.floor（I/6），w:2，h:4，I:I.toString（）}；}else{return x:（I*2）%12，y:Math.floor（i/6），w:4，h:2，i:i.toString（）}；}
我尝试过这个，但没有成功