react mobx - 存储返回代理对象

IT技术 javascript reactjs mobx
2021-05-21 23:46:13

我有以下状态类:

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日志显示用户对象。知道我错过了什么吗?

在此处输入图片说明

1个回答

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

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

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