React mobx - 存储返回代理对象

Question

我有以下状态类：

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

不幸的是，stateuser属性返回一个Proxy对象，而user日志显示的是 user 对象。知道我缺少什么吗？

Answer 1

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

为了获得更用户友好的输出，您可以使用toJS类似的 MobX 方法console.log(toJS(user))或者只是解构用户对象console.log({ ...user })

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