React JS - 未定义的变量

Question

我正在尝试修改一个简单的 React 应用程序，但我对 React 了解不多。

我正在尝试为我的 iframe 设置数据属性。该值应取自 localStorage.getItem().

这是我的代码：

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;

不幸的是，我得到一个 "sessionId is not defined" 错误。

同样，我不知道反应，对我来说它似乎与经典 js 真的不同。

有谁知道我误会了什么？

Answer 1

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

let 变量的作用域为它们所在的块。因此第一个变量仅在 if 内可用，第二个变量仅在 else 内可用。一旦你通过 else，就没有 sessionId 变量，因此 id={sessionId} 会抛出一个错误。

要解决此问题，请将代码更改为您最初显示的代码：

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

这样，就有一个 sessionId 变量，它的范围是整个渲染函数。

Answer 2

您在 if 和 else 块中声明了变量 sessionId，因此它的范围仅限于相应的块，无论是 if 块还是 else块。您的错误是由于此处的代码造成的：

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

相反，您应该在 if 和 else 范围之外删除 sessionId 变量，以便在它们之外使用它。

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

这将解决您的错误！！！

建议：在开始 ReactJS 之前，请先清除您的 JS 基础知识

Answer 3

您在本地范围内定义 sessionId 并在范围外访问它，这就是错误显示 sessionId is not defined 的原因。您需要创建一个保持 sessionId 的状态，并通过 this.setState

更新 sessionId

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>
        
    );
  }
});

React JS - 未定义的变量

React JS - Undefined variable

javascript

reactjs

local-storage