React JS - 未定义的变量

Question

I'm trying to modify a simple react app, but I don't know a lot about react.

I'm trying to set a data-attribute to my iframe. This value should be taken from localStorage.getItem().

here is my code:

import React from 'react';
import createReactClass from 'create-react-class';
import {Col, Row} from "react-bootstrap";




const SamplePage = createReactClass({
  displayName: 'Plugin',
  render() {
  
    if (localStorage.getItem('sessionId')){
        let sessionId = localStorage.getItem('sessionId');
    }
    else{
        let sessionId = "";
    }
    
    return (
        
          <iframe src="http://myurl.x/" frameborder="0" style={{height:"85vh",position:"relative"}} id={sessionId} width="100%" height="100%" scrolling="no"></iframe>
        
    );
  }
});

export default SamplePage;

Unfortunately I get a "sessionId is not defined" error.

Again, I don't know react and it seems really different to classic js for me.

Does anyone knows whats I misunderstood?

Answer 1

if (localStorage.getItem("sessionId")) {
  let sessionId = localStorage.getItem("sessionId");
} else {
  let sessionId = "";
}

let variables are scoped to the block that they're contained in. So the first variable is only usable inside the if , and the second only inside the else . Once you get past the else, there is no sessionId variable, and thus id={sessionId} throws an error.

To fix this, change the code to what you originally showed:

let sessionId;
if (localStorage.getItem("sessionId")) {
  sessionId = localStorage.getItem("sessionId");
} else {
  sessionId = "";
}

That way, there's a single sessionId variable, who's scope is the entire render function.

Answer 2

You have declared variable sessionId inside the if and else blocks, hence its scope is limited to the corresponding blocks, whether it is if block or else block. Your error is due to this code here:

if (localStorage.getItem('sessionId')){
    let sessionId = localStorage.getItem('sessionId');
}
else {
    let sessionId = "";
}

Instead, you should delcare sessionId variable outside if and else scopes to use it outside them.

let sessionId="";
if (localStorage.getItem('sessionId')){
    sessionId = localStorage.getItem('sessionId');
}

This will resolve your error !!!

Advice : Please do clear your JS basics before starting ReactJS

Answer 3

You define sessionId in a local scope and access it outside of the scope that is why the error says sessionId is not defined . You need to create a state that hold sessionId , and update the sessionId by this.setState

const SamplePage = createReactClass({
  displayName: 'Plugin',
  getInitialState: function() {
    return {sessionId: ""};
  },
  setSessionId: function(sessionId) {
    this.setState({sessionId});
  },
  componentDidMount: function(){

    if (localStorage.getItem('sessionId')){
        const sessionId = localStorage.getItem('sessionId');
        this.setSessionId(sessionId)
    }
    else{
        this.setSessionId("")
    }
  },
  render() {
  
    
    return (
        
          <iframe src="http://myurl.x/" frameborder="0" style={{height:"85vh",position:"relative"}} id={this.state.sessionId} width="100%" height="100%" scrolling="no"></iframe>
        
    );
  }
});