2017-01-24 9 views
0

다음과 같은 MobX 저장소가 있습니다. Store 클래스입니다. this.user.permits.db에 액세스하려면 this.user이 정의되지 않았 음을 알리는 오류가 나타납니다. 내가 왜 @observable user에 액세스 할 수 없는지 궁금합니다.동일한 클래스의 변수에 액세스 할 수 없습니다.

src/ui/store/store.js 파일 : store.js에서 상점을 가져

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 파일 :

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 파일, 자바 스크립트에 user을 통과 :

<!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: https://stackoverflow.com/a/16098699/7312233 
--> 
<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> 

CouchDB를 사용자 데이터베이스에 샘플 사용자 문서에 permits 필드가 아래와 같이 정의된다 :

enter image description here


UPDATE :

또한 this도 수정해야합니다.

답변

1

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 
    }) 
    } 
} 
+0

제가 시도했지만 문제는 CouchDB가 문서 필드를 어떻게 처리하는지와 관련되어 보입니다. 'console.log ('user.permits :'+ user.permits)'출력은'user.permits : {db : [ 'TEL', 'PTT',]}'및'console.log ('user.permits. db : '+ user.permits.db)''user.permits.db : undefined' – user3405291

+0

그러므로'user.permits'는 좋지만'user.permits.db'는 접근 할 수 없습니다. – user3405291

+1

[이 답변] (http://stackoverflow.com/a/41829238/7312233)과 결합하면 솔루션이 효과를 발휘했습니다. 감사합니다! – user3405291