会话存储无法在reactjs应用中实现

Question

我在react中创建了一个简单的页面。在那儿，我做了一个按钮。单击该按钮后，将触发一个响应，我需要将其保存在会话存储中。

这是我的代码；

Main.js

import React, {Component} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import {Route, Switch} from 'react-router-dom';
import Navigation from "./components/topNavigation";
import Footer from "./components/Footer";
import Banner from "./components/Banner";
import PLPMenu from "./components/PLPMenu";
import PDP from "./components/PDP";
import Home from "./components/Home";
import CartList from "./components/CartList";
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {login} from "./actions";


class Main extends Component {

    componentDidMount() {
        this.props.login;
        console.log(this.props)
    }



     login() {
        // for all items in state
        for (let WCToken in this.props.login()) {
          // if the key exists in localStorage
          if (localStorage.hasOwnProperty(WCToken)) {
            // get the key's value from localStorage
            let value = localStorage.getItem(WCToken);

            // parse the localStorage string and setState
            try {
              value = JSON.parse(value);
              this.setState({ [WCToken]: value });
            } catch (e) {
              // handle empty string
              this.setState({ [WCToken]: value });
            }
          }
        }
      }


    render() {


        return (
            <div>
                <button className=" float-right" onClick={(e) => this.props.login()}>Login in as Guest</button>

        <Navigation />

                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/Apparel/:category/:subCategory/:id" component={PLPMenu}/>
                    <Route path="/Apparel/:product/:id" component={PDP}/>
                    <Route path="/cart" component={CartList}/>
                    <Route path="/Banner" component={Banner}/>
                    <Route path="/Footer" component={Footer}/>
                </Switch>


            </div>

        )

    }


}

const mapStateToProps = (state) => {
    return {
        loginResponse: state.fashion.loginResponse
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        login: login
    }, dispatch)
};

export default connect(mapStateToProps, mapDispatchToProps)(Main);

每当我单击按钮时，控制台浏览器窗口中就会显示一个响应。

基本上，从响应中，我需要将WCToken和WCTrustedToken保存在会话存储中。 我已经写了一段代码将会话保存在上面的Main.js文件中，但是没有保存在会话存储中。

有人可以帮我吗？或者至少给我提供了有关如何解决此错误的见解。谢谢