Блог

У меня есть следующий класс состояния:

 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 полагается на прокси под капотом, поэтому, когда вы регистрируете наблюдаемые объекты, он обычно показывает некоторую внутреннюю реализацию.

Вы можете использовать метод console.log(toJS(user)) toJS MobX или просто уничтожить пользовательский объект console.log({ ...user })

toJS документы: https://mobx.js.org/refguide/tojson.html