1

我搜索了很多,并做了所有我认为看起来有必要让 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
);

应用组件;

@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,但我希望它在 Menu 组件中重新呈现? 在此处输入图像描述

4

0 回答 0