sessionStorage не обновляет страницу - PullRequest
Новая
       23

sessionStorage не обновляет страницу

3 голосов
/ 21 января 2020

Я пытаюсь уменьшить свою панель навигации с помощью переменной isCollapse в моем sessionStorage. При нажатии на кнопку, сессия можно изменить, но рендер не обновляется.

Код JSX 

{
    sessionStorage.getItem("collapse") === "true" ?
    <div className="LeftMenu" style={{
        width: 45,
        float: "left",
        height: "100%",
        borderRight: "1px solid #dfe4e8",
        textAlign: "left",
    }}>
        <div className="tableElement">
            <FontAwesomeIcon icon={faHome} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTasks} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faUsers} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTh} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faArchive} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faCopy} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faNewspaper} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faDownload} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faFingerprint} className="icon" />
        </div>

    </div>
    :
    <div className="LeftMenu" style={{
        width: "12%",
        float: "left",
        height: "100%",
        borderRight: "1px solid #dfe4e8",
        textAlign: "left",
        minWidth: 200
    }}>
        <div className="tableElement">
            <FontAwesomeIcon icon={faHome} className="icon" /> Home
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTasks} className="icon" /> Organisations
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faUsers} className="icon" /> Users
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTh} className="icon" /> Templates Library
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faArchive} className="icon" /> Audit Trail
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faCopy} className="icon" /> Data Copy
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faNewspaper} className="icon" /> VAT Reporting
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faDownload} className="icon" /> Download add-in
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faFingerprint} className="icon" /> Account
        </div>
    </div>
}

Я не знаю, если это лучший способ сделать это, но если я установил для sessionStorage значение true и вручную переосмыслил sh, это работает.

edit 1: Я пытался использовать ComponentDidMount функция выглядит следующим образом: 

componentDidMount = () => {
    this.setState({
        isCollapse: sessionStorage.getItem("collapse")
    }, () => { console.log(this.state.isCollapse) })
}

, но она тоже не работает

edit 2: Я не указал, но моя функция onClick и мой рендер не находятся в сохранить файл, у меня есть кнопка, чтобы уменьшить боковую панель в другом компоненте, и я хочу сохранить это изменение на всем моем веб-сайте, поэтому я использую sessionStorage

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Метод render () будет визуализировать этот код, но он не будет обновлять состояние, необходимое для использования setState, вы можете создать функцию, которая будет проверять предыдущее состояние, если isCollapse имеет значение true, оно сделает его ложным, и если оно установит в false это сделает его истинным, поэтому он будет действовать как кнопка запуска, которая сделает ваш isCollapse true или false в зависимости от предыдущего значения. 

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

и внутри onClick вашей кнопки вы можете вызвать это функция 

onClick={this.changeIsCollapse.bind(this)}
0 голосов
/ 21 января 2020

Вы можете использовать редуктор или состояние для сохранения изменений, так как рендеринг будет происходить, если есть изменение в состоянии или реквизите. Изменение 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/>}

, если вы используете редуктор, выполните следующие шаги 

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
...