reactjs - ローカル ストレージからレイアウトを読み込めません - getLayout 関数が機能していません

Question

ロード時に react-grid-layout をローカル ストレージから読み取る際に問題が発生しています。私はそれを保存し、それぞれのユーザーに固有のユーザー名キーを使用してレイアウトにアクセスしたいと考えています。レイアウトをローカル ストレージに保存できますが、それを行うのに問題はなく、レイアウトを変更するとレイアウトが変更されていることがわかります。ページをリロードすると、レイアウトが保存されず、ローカル ストレージがクリアされ、新しいアイテムを追加しようとすると、新しいアイテムをオブジェクトの配列 (レイアウト) にプッシュできないというエラーが表示されます。ページを再度更新すると、このエラーはなくなります。以下のコードで完全なエラーを示しました。できる限りレイアウトに追加/削除できるようにしたいのですが、そのレイアウトが変更されたときにローカルストレージに保存して、ページが更新されたときやユーザーがページを何度もクリックしたときに、

const ReactGridLayout = WidthProvider(Responsive);

const Dragfield = styled(ReactGridLayout)`
margin: 10px 0px 0px 0px;
${props => props.isDragging ? `
  background: url(${dragBackground});
  background-repeat: repeat-y;
  background-position: 100% 0px;
  background-size: 100% 100px
`: ''};
`

//Find username form localstorage (uuid string)
const username = localStorage.getItem('username')

const Dash = (props) => {
  const [isDragging, setIsDragging] = React.useState(false);
  //Variable used for id of grid component:
  const id = uuid()

  //Hook to set layout state
  const originialLayouts = getLayout("layouts")  || [].map(function(i, list) {
    return {
      i: i.toString(),
      x: i * 2,
      y: 0,
      w: 3,
      h: 3,
      add: i === (list.length - 1)
    }
  });
 
  const savedLayout = JSON.parse(JSON.stringify(originialLayouts))
  console.log(JSON.parse(JSON.stringify(originialLayouts)))

  //column size is static
  //layouts taken from local storage via function
  const [ state, setState ] = React.useState({
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: 30,
    layout: savedLayout
  })

  //function ammends layout array with additional grid item
  const addItem = () => { 
    console.log('adding: ' + id);
    const newLayout = state.layout;
    newLayout.push({
      i: `${id}`,
      x: (state.layout.length * 3) % (state.cols || 12),
      y: 0,
      w: 3,
      h: 3
    })
    setState({layout: newLayout})
  }

  //function to remove grid item on click
  const removeItem = (i) => {
    console.log(i)
    setState({ layout: _.reject(state.layout, { i:i }) })     
  }

   // function to calculate where to add items based on the cols
   const onBreakpointChange = (breakpoint, cols) => {
    setState({
      cols: cols,
      breakpoint: breakpoint
    })
    console.log(state)
  }

  //function to save layout to LS everytime a grid item is moved.
  const onLayoutChange = (layout, layouts) => {
    console.log(layouts)
    saveLayout("layouts", state.layout)
    console.log(state.layout)
    setState({ layout: layout})
  }


  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <Dragfield
        {...state}
        className="layout"
        onDragStart={() => setIsDragging(true)}
        onDragStop={() => setIsDragging(false)}
        onResizeStart={() => setIsDragging(true)}
        onResizeStop={() => setIsDragging(false)}
        isDragging={isDragging}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        onBreakpointChange={onBreakpointChange}
        onLayoutChange={(layout, layouts) => onLayoutChange(layout, layouts)}
        cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
        resizeHandles={['se']}
        compactType={'vertical'}
        draggableHandle=".dragHandle"               
     >        
        {_.map(state.layout, (item, i) => (
          <div key={item.i} data-grid={state.layout[i]}>            
          <DashItem>
            <button onClick={() => removeItem(item.i)}>Remove Item</button>  
            <CreateGraph data={state.layout[i]}/>
          </DashItem>
          <div className='dragHandle'>Drag From Here</div>
          </div>
      ))}
      </Dragfield>
    </div>
  );
}

//function to get user layout from LS
const getLayout = (key) => {
  let ls = [];
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem(username + 1)) ||
      [].map(function(i, list) {
        return {
          i: i.toString(),
          x: i * 2,
          y: 0,
          w: 3,
          h: 3,
          add: i === (list.length - 1)
        }
      });
    } catch (error) {
      console.log('error with getLayout')
    }
  }
  return ls[key]
}

//function to save user layout to LS
const saveLayout = ( key, value ) => {
  if (global.localStorage) {
    global.localStorage.setItem( username+1, JSON.stringify({ [key]: value}) );
  }
}

export default Dash;

編集：

アイテムを追加するときに表示されるエラー コード:

Uncaught TypeError: Cannot read property 'push' of undefined
    at addItem (static/js/main.chunk.js:1096)
    at HTMLUnknownElement.callCallback (static/js/1.chunk.js:794981)
    at Object.invokeGuardedCallbackDev (static/js/1.chunk.js:795030)
    at invokeGuardedCallback (static/js/1.chunk.js:795090)
    at invokeGuardedCallbackAndCatchFirstError (static/js/1.chunk.js:795105)
    at executeDispatch (static/js/1.chunk.js:799340)
    at processDispatchQueueItemsInOrder (static/js/1.chunk.js:799372)
    at processDispatchQueue (static/js/1.chunk.js:799385)
    at dispatchEventsForPlugins (static/js/1.chunk.js:799396)
    at static/js/1.chunk.js:799607
    at batchedEventUpdates$1 (static/js/1.chunk.js:813292)
    at batchedEventUpdates (static/js/1.chunk.js:794779)
    at dispatchEventForPluginEventSystem (static/js/1.chunk.js:799606)
    at attemptToDispatchEvent (static/js/1.chunk.js:797089)
    at dispatchEvent (static/js/1.chunk.js:797007)
    at unstable_runWithPriority (static/js/1.chunk.js:893924)
    at runWithPriority$1 (static/js/1.chunk.js:802387)
    at discreteUpdates$1 (static/js/1.chunk.js:813309)
    at discreteUpdates (static/js/1.chunk.js:794791)
    at dispatchDiscreteEvent (static/js/1.chunk.js:796973)