设置会话存储并从中获取状态

Question

So I have a sidenav that has expansion panels that open. I'm setting the state on which expansion panel is open. But on click of one of the sidenav , I get redirected to the list item path and the sidenav returns to original state . on the redirect I'd like for the part of the sidenav that was open to persist. I'm trying to do it like this. I'm not sure why it's not working.

 handleOpen = path => {
    this.setState({ openPath: path });
    sessionStorage.setItem('path', this.state.openPath);
  };

class Sidebar extends React.Component {
  constructor(props){
    super(props);
    let getPath = JSON.parse(sessionStorage.getItem('path'))
  this.state = {
    openPath: getPath
  };

  }

Answer 1

You should probably show at least how the component is used but at first glance:

sessionStorage.setItem('path', this.state.openPath);

needs to be

sessionStorage.setItem('path', JSON.stringify(this.state.openPath));

also I'd reverse these lines:

  handleOpen = path => {
    this.setState({ openPath: path });
    sessionStorage.setItem('path', this.state.openPath);
  };

to

  handleOpen = path => {
    sessionStorage.setItem('path', this.state.openPath);
    this.setState({ openPath: path });
  };

It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.