我搜索了很多并且做了我看到的所有看起来必要的东西,以使这些obseravle的东西工作,但不知何故mobx缺乏观察可观察的属性(menuItems)。
我检查执行顺序,尽管已经将获取的数据加载到字段精细组件呈现方法而不是重新运行
useStrict(true);
export class AppState {
@observable public menuItems: MenuModel[] = [];
constructor(){
this.setItems()
}
@action setItems(): void {
fetch(`..`).then((response: { value: MenuModel[] }): void => {
debugger
this.menuItems = [
{ Id: 1, itemName: 'test-item1', childItems: [] }
];
}, (error: any): void => {
});
}
根文件;
const appState = new AppState();
ReactDOM.render(
<Provider appState={appState}>
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Empty} />
</Route>
</Router>
</Provider>,
document.getElementById('root') as HTMLElement
);
app组件;
@observer
export class App extends React.Component<{children: any, params: any}, {}> {
render() {
return (
<div className="container">
<header className="main-header"></header>
<main>
<aside>
<Menu params = {this.props.params} />
</aside>
</main>
</div>
);
}
};
和菜单组件,每当可观察字段更新时,我都期望下面的渲染方法..但它并不关心。
@inject('appState')
@observer
export class Menu extends React.Component<{params?:MenuModel[], appState?: AppState}, {}> {
render() {
debugger
var menuJSX : JSX.Element[] = this.props.appState ? this.props.appState.menuItems.map((item:MenuModel, i:number)=>{
debugger
return (<li key={item.Id}>{item.itemName}</li>)
}):[];
return (
<div id="menuWrapper">
Data: {menuJSX}
</div>
);
}
}
我不知道它是否有帮助,但我分享了“menuItems”属性在它看起来如何,在此调试步骤之后它转到AppState文件并在此点执行结束后设置menuItems,但我希望它重新渲染在菜单组件?