在 MobX 中处理异步操作,通常可以结合使用 async/await 语法和 action 修饰器。
首先创建一个异步的 action 方法:
javascript格式:
import { observable, action } from'mobx';
class MyStore {
@observable data = null;
@action
async fetchData() {
try {
const response = await fetch('https://example.com/api/data');
const json = await response.json();
this.data = json;
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
export default new MyStore();
然后在React 组件中调用这个异步 action :
javascript格式:
import React from'react';
import { observer } from'mobx-react';
import store from './store';
@observer
class MyComponent extends React.Component {
componentDidMount() {
store.fetchData();
}
render() {
if (!store.data) {
return <div>Loading...</div>;
}
return (
<div>
<p>{store.data.someProperty}</p>
</div>
);
}
}
export default MyComponent;
这样,当调用 fetchData 方法时,会执行异步操作获取数据,并更新 MobX 中的可观察状态,从而触发相关组件的重新渲染。