我试图将mobx-rest与mobx-rest-axios-adapter和mobx-react结合使用,并且在使组件在异步数据检索时重新呈现时遇到麻烦。
这是我的数据模型,位于state/user.js
:
import { Model } from 'mobx-rest';
class User extends Model {
url() {
return '/me';
}
}
export default new User();
这是React组件,位于App.js
:
import React from 'react';
import { inject, observer } from 'mobx-react';
import { apiClient } from 'mobx-rest';
import createAdapter from 'mobx-rest-axios-adapter';
import axios from 'axios';
import { compose, lifecycle, withProps } from 'recompose';
const accessToken = '...';
const API_URL = '...';
const App = ({ user }) => (
<div>
<strong>email:</strong>
{user.has('email') && user.get('email')}
</div>
);
const withInitialise = lifecycle({
async componentDidMount() {
const { user } = this.props;
const axiosAdapter = createAdapter(axios);
apiClient(axiosAdapter, {
apiPath: API_URL,
commonOptions: {
headers: {
Authorization: `Bearer ${accessToken}`,
},
},
});
await user.fetch();
console.log('email', user.get('email'));
},
});
export default compose(
inject('user'),
observer,
withInitialise,
)(App);
它使用recomposeuser
从中的API异步获取componentDidMount()
,并且一旦可用,该组件将显示用户电子邮件。componentDidMount()
可用时打印电子邮件。
最后是index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router';
import App from './App';
import { user } from './state/user';
const documentElement = document.getElementById('ReactApp');
if (!documentElement) {
throw Error('React document element not found');
}
const browserHistory = createBrowserHistory();
const routingStore = new RouterStore();
const stores = { user };
const history = syncHistoryWithStore(browserHistory, routingStore);
ReactDOM.render(
<Provider {...stores}>
<Router history={history}>
<App />
</Router>
</Provider>,
documentElement,
);
我的问题是,尽管控制台日志显示它在异步请求中已成功返回,但是一旦检索到用户并且电子邮件可用,该组件就不会重新呈现。我试过玩mobx-react的游戏computed
,但是没有运气。有任何想法吗?
我认为,如果您更改以下内容的撰写顺序,那么它会起作用App.js
:
export default compose(
inject('user'),
withInitialise,
observer,
)(App);
根据MobX的官方文件,
提示:当观察者需要与其他装饰者或更高阶的组件结合时,请确保观察者是最里面的 (首先应用的)装饰者;否则它可能什么都不做。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句