0

我有一个类似以下Store课程的 MobX 商店。当我想访问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>

permitsCouchDB 用户数据库上的示例用户文档中的字段定义如下：

在此处输入图像描述

更新：

这也应该得到纠正。

4

1 回答 1

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
    })
  }
}
于 2017-01-24T11:14:25.550 回答