我正在嘗試修改一個簡單的反應應用程式，但我對反應知之甚少。
我正在嘗試為我的 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 真的不同。
有誰知道我誤解了什么？
uj5u.com熱心網友回復：
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 變數，其作用域是整個渲染函式。
uj5u.com熱心網友回復：
您已經在and塊sessionId內宣告了變數，因此它的范圍僅限于相應的塊，無論是塊還是塊。您的錯誤是由于這里的代碼：ifelseifelse
if (localStorage.getItem('sessionId')){
let sessionId = localStorage.getItem('sessionId');
}
else {
let sessionId = "";
}
相反，您應該 delcaresessionId外部變數if和else范圍以在它們外部使用它。
let sessionId="";
if (localStorage.getItem('sessionId')){
sessionId = localStorage.getItem('sessionId');
}
這將解決您的錯誤！
建議：請在開始 ReactJS 之前清除您的 JS 基礎知識
uj5u.com熱心網友回復：
您sessionId在本地范圍內定義并在范圍外訪問它，這就是錯誤提示的原因sessionId is not defined。您需要創建一個持有的狀態sessionId，并更新sessionIdbythis.setState
const SamplePage = createReactClass({
displayName: 'Plugin',
getInitialState: function() {
return {sessionId: ""};
},
setSessionId: function(sessionId) {
this.setState({sessionId});
},
render() {
if (localStorage.getItem('sessionId')){
const sessionId = localStorage.getItem('sessionId');
this.setSessionId(sessionId)
}
else{
this.setSessionId("")
}
return (
<iframe src="http://myurl.x/" frameborder="0" style={{height:"85vh",position:"relative"}} id={this.state.sessionId} width="100%" height="100%" scrolling="no"></iframe>
);
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/448636.html
標籤：javascript 反应 本地存储
上一篇：具有唯一值的過濾器陣列