react mobx - 存储返回代理对象 [英] react mobx - store return Proxy object

问题描述

我有以下状态类:

import { observable, action } from 'mobx';从 'axios' 导入 axios；导出默认类 AppState {@observable 用户；@observable pToken;构造函数(){this.user = {};this.pToken = localStorage.getItem('pToken');}异步 fetchData(查询){const body = JSON.stringify({ query, });const response = await axios.post('url', body, {标题:{'内容类型':'应用程序/json'，令牌:localStorage.getItem('pToken')}});const user = response.data.data.user;console.log('得到用户', 用户);this.setUser(user);}@action setUser(user) {this.user = 用户；}}

在我的组件中:

@inject('store')@观察者导出默认类头扩展组件{构造函数(道具){超级(道具)；this.store = this.props.store.appState;}使成为() {const { 用户 } = this.store;console.log('store', this.store);返回 (
用户 - {user.username}</标题>);}}

不幸的是，状态 user 属性返回一个 Proxy 对象，而 user 日志显示用户对象.知道我错过了什么吗?

解决方案

一切都按预期工作，MobX v5 依赖于引擎盖下的代理，因此当您记录可观察对象时，它通常会显示一些内部实现.

你可以使用 toJS MobX 方法 console.log(toJS(user)) 或者只是解构用户对象 console.log({ ...user })

toJS 文档:https://mobx.js.org/refguide/tojson.html

I have the following state class:

import { observable, action } from 'mobx';
import axios from 'axios';

export default class AppState {
  @observable user;
  @observable pToken;

  constructor() {
    this.user = {};
    this.pToken = localStorage.getItem('pToken');
  }

  async fetchData(query) {

    const body = JSON.stringify({ query, });
    const response = await axios.post('url', body, {
      headers: {
        'Content-Type': 'application/json',
        token: localStorage.getItem('pToken')
      }
    });

    const user = response.data.data.user;
    console.log('Got user', user);
    this.setUser(user);
  }

  @action setUser(user) {
    this.user = user;
  }
}

and in my component:

@inject('store')
@observer
export default class Header extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store.appState;
    }

    render() {
        const { user } = this.store;
        console.log('store', this.store);

        return (
            <header className='header'>
                User - {user.username}
            </header>
        );
    }
}

Unfortunately, the state user property returns a Proxy object, while the user log shows the user object. Any idea what I'm missing?

解决方案

Everything is working as intended, MobX v5 relies on proxies under the hood so when you log observable objects it usually shows some internal implementation.

You can use toJS MobX method console.log(toJS(user)) or just destructure user object console.log({ ...user })

toJS docs: https://mobx.js.org/refguide/tojson.html

这篇关于react mobx - 存储返回代理对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！