Я пытаюсь использовать мобкс-отдых с mobx-rest-axios-адаптер и 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.info('email', user.get('email'));
},
});
export default compose(
inject('user'),
observer,
withInitialise,
)(App);
Он использует перекомпоновывать для асинхронного получения user
из 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,
);
Моя проблема в том, что компонент не перерисовывается после того, как пользователь получен и электронная почта доступна, хотя журнал консоли показывает, что в асинхронном запросе он возвращается нормально. Я пробовал поиграть с computed
mobx-react, но не повезло. Любые идеи?
Я думаю, что это сработает, если вы измените порядок создания App.js
:
export default compose(
inject('user'),
withInitialise,
observer,
)(App);
Согласно Официальный документ MobX,
Tip: when observer needs to be combined with other decorators or higher-order-components, make sure that observer is the innermost(first applied) decorator; otherwise it might do nothing at all.
Спасибо! Это должно быть проблемой. В моем случае это не работает с этим порядком, я полагаю, потому что
withInitialise
зависит от вещей, которые поставляютсяobserver
. Но зная причину, я уверен, что смогу с этим разобраться.