无法访问同一 class 内的变量
Cannot access a variable inside the same class
我有一个像下面这样的 MobX 商店 Store
class。当我想访问 this.user.permits.db
时,收到 this.user
未定义的错误。我想知道为什么我无法访问 @observable user
.
src/ui/store/store.js
file:
import { action, observable } from 'mobx'
import { useStrict } from 'mobx';
useStrict(true);
class Store {
constructor(){
//
}
@observable user
@action setUser=(user)=>{
this.user=user
}
@observable menus=[
{menu1: 'DATABASE',
/*menu2s: ['PC', 'NETWORK', 'TEL', 'PTT'],*/ //-> this line works fine
menu2s: this.user.permits.db, //-> this line gives an error: Cannot read property 'permits' of undefined
}
]
}
export default new Store
src/ui/ui.js
file which imports store from store.js
:
import React from 'react'
import ReactDOM from 'react-dom'
import Layout from './components/layout.js'
import Store from './store/store.js'
//user comes from HTTP GET request
Store.setUser(user)
ReactDOM.render(<Layout store={Store}/>,document.getElementById('ui'))
src/views/profile.ejs
file, passing user
to JavaScript:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>User profile</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<!--
Pass variables from http GET to JavaScript
also block script injection attacks
ref:
-->
<script>
function htmlDecode(input){
var e=document.createElement('div');
e.innerHTML=input;
return e.childNodes.length===0?"":e.childNodes[0].nodeValue;
}
var user=JSON.parse(htmlDecode("<%= JSON.stringify(user) %>"));
</script>
<div id="ui"></div>
<script src="/js/ui.bundle.js"></script>
</html>
A permits
field on a sample user document on CouchDB user database is defined like below:
更新:
另外也应该更正。
当您声明 class 时,this.user
未设置,因此 this.user.permits
会导致错误。你可以改为这样做:
class Store {
@observable user
@observable menus = []
@action setUser = (user) => {
this.user = user
this.menus.push({
menu1: 'DATABASE',
menu2s: this.user.permits.db
})
}
}
我有一个像下面这样的 MobX 商店 Store
class。当我想访问 this.user.permits.db
时,收到 this.user
未定义的错误。我想知道为什么我无法访问 @observable user
.
src/ui/store/store.js
file:
import { action, observable } from 'mobx'
import { useStrict } from 'mobx';
useStrict(true);
class Store {
constructor(){
//
}
@observable user
@action setUser=(user)=>{
this.user=user
}
@observable menus=[
{menu1: 'DATABASE',
/*menu2s: ['PC', 'NETWORK', 'TEL', 'PTT'],*/ //-> this line works fine
menu2s: this.user.permits.db, //-> this line gives an error: Cannot read property 'permits' of undefined
}
]
}
export default new Store
src/ui/ui.js
file which imports store fromstore.js
:
import React from 'react'
import ReactDOM from 'react-dom'
import Layout from './components/layout.js'
import Store from './store/store.js'
//user comes from HTTP GET request
Store.setUser(user)
ReactDOM.render(<Layout store={Store}/>,document.getElementById('ui'))
src/views/profile.ejs
file, passinguser
to JavaScript:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>User profile</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<!--
Pass variables from http GET to JavaScript
also block script injection attacks
ref:
-->
<script>
function htmlDecode(input){
var e=document.createElement('div');
e.innerHTML=input;
return e.childNodes.length===0?"":e.childNodes[0].nodeValue;
}
var user=JSON.parse(htmlDecode("<%= JSON.stringify(user) %>"));
</script>
<div id="ui"></div>
<script src="/js/ui.bundle.js"></script>
</html>
A
permits
field on a sample user document on CouchDB user database is defined like below:
更新:
另外
this.user
未设置,因此 this.user.permits
会导致错误。你可以改为这样做:
class Store {
@observable user
@observable menus = []
@action setUser = (user) => {
this.user = user
this.menus.push({
menu1: 'DATABASE',
menu2s: this.user.permits.db
})
}
}