如何解决反应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 })
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。