Javascript 会话存储不'；不要更新页面

我试图在sessionStorage中使用一个“isCollapse”变量来减少导航栏。 单击该按钮，我的会话存储将更改，但渲染不会更新

JSX代码

但它也不起作用

---

编辑2:我没有指定，但我的onClick函数和渲染不在保存文件中，我有按钮来减少另一个组件中的侧边栏，我想在我所有的网站上保留这一更改，这就是为什么我使用sessionStorage

你可以使用reducer或state来存储更改，因为如果状态或道具发生更改，渲染将发生。sessionStorage更改将不会触发渲染。注意：对于此要求，使用会话存储是不好的做法

//initialize a state

state = {
collapse:false
}

//set state on click
onClick={() => this.setState({collapse:!this.state.collapse})

//use state to show and hide

{this.state.collapse && <...content/>}

render（）方法将呈现此代码，但它不会更新使用setState所需的状态，您可以创建一个函数，该函数将检查以前的状态如果isCollapse为true，它将使其为false，如果它设置为false，它将使其为true，因此，它将充当一个触发按钮，根据前面的值使isCollapse为真或假

changeIsCollapse() {
  if(sessionStorage.getItem('collapse') === 'true')
  { 
   this.setState({ 
    isCollapse: false
   }) 
  } else { 
   this.setState({ 
    isCollapse: true
  }) 
 }
}

在你的按钮里，你可以调用这个函数

onClick={this.changeIsCollapse.bind(this)}

---

会话存储不是状态。为什么要重新渲染组件？如果

道具

或

状态

不变，组件将不会更新。您是否将此代码放入componentDidMount（）？此代码在渲染中，但我尝试将变量设置为该状态，但也不起作用：

componentDidMount=（）=>{this.setState({isCollapse:sessionStorage.getItem（“collapse”）}，（）=>{console.log（this.state.isCollapse）}

尝试将其放入componentDidMount（）。它将首先显示旧状态，但由于componentDidMount（）的原因，它将快速更新其状态。我尝试将其置于：

componentDidMount=>{this.setState]的状态({isCollapse:sessionStorage.getItem（“collapse”）}，（）=>{console.log（this.state.isCollapse）}

但它不起作用too@AnthonyBrochier我在答案中做了一些更改，您可以尝试相同的方法。我没有指定，但我的onClick函数和渲染不在保存文件中，我有按钮来减少另一个组件中的侧边栏，我希望在我的所有网站中保留此更改，这就是我使用sessionStoragep的原因请使用reducer并使状态为全局。您还可以通过“if”和“else”中的sessionStorage.setItem（）更新sessionStorage

1.create an action creators
2.dispatch an action
3.set state in store
4.connect state to the component diretly or by passing props

changeIsCollapse() {
  if(sessionStorage.getItem('collapse') === 'true')
  { 
   this.setState({ 
    isCollapse: false
   }) 
  } else { 
   this.setState({ 
    isCollapse: true
  }) 
 }
}

onClick={this.changeIsCollapse.bind(this)}