javascript - sessionStorage 不更新页面

Question

我正在尝试使用 sessionStorage 中的“isCollapse”变量来减少导航栏。通过单击该按钮，我的 sessionStorage 会发生变化，但渲染不会更新。

JSX Code

{
    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 并手动刷新，它就会起作用。

编辑1:我尝试使用 ComponentDidMount 函数，如下所示:

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

但它也不起作用

编辑2:我没有指定，但我的onClick函数和渲染不在保存文件中，我有减少另一个组件中侧边栏的按钮，我想保留这个我的所有网站都发生了变化，这就是我使用 sessionStorage 的原因

Answer 1

您可以使用reducer或state来存储更改，因为如果state或props发生更改，就会发生渲染。 sessionStorage 更改不会触发渲染。请注意，对于此要求，使用 session 存储是不好的做法。

//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/>}

如果您使用的是reducer，请执行以下步骤

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