反应mobx-存储返回代理对象

问题描述

我有以下状态类：

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;
  }
}

以及在我的组件中：

@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>
        );
    }
}

不幸的是，状态user返回一个Proxy对象，而user日志显示了用户对象。知道我缺少什么吗？

解决方法

一切都按预期进行，MobX v5依靠内部的代理，因此，当您记录可观察对象时，它通常会显示一些内部实现。

您可以使用toJS MobX方法console.log(toJS(user))或仅破坏用户对象console.log({ ...user })

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