1

私は多くを検索し、観察可能なものを機能させるために必要と思われるすべてのことを行いましたが、どういうわけか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>
      );
    }
};

およびメニューコンポーネント、観察可能なフィールドが更新されるたびに以下のrenderメソッドを期待しています..しかし、それは気にしません。

@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