2017-01-24 4 views
0

У меня есть магазин MobX, например, следующий класс Store. Когда я хочу получить доступ к this.user.permits.db, я получаю сообщение об ошибке, которое this.user не определено. Интересно, почему я не могу получить доступ к @observable user.Невозможно получить доступ к переменной внутри того же класса

src/ui/store/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 файл, который импортирует магазин из 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 файл, прохождение user в 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: 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> 

permits поле на документе пользователя образца на пользовательской базе данных CouchDB определяется, как показано ниже:

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 pareses поле документа. 'console.log ('user.permits:' + user.permits)' output is '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