mobxの観測可能なデータを小道具に渡す

Question

react-typescriptプロジェクトでmobxを使用する。フェッチAPIを使用して、このクラス設定に観察配列：

class MenuRepo { 
    @observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}]; 
    @action getItems(): void { 
    fetch(`...`) 
     .then((response: { value: IMenuModel[] }): void => { 
     this.menuItems = [ 
      { Id: 1, itemName: 'test-item1', childItems: [] } 
     ]; 
     }); 
    } 

は、私は、このコンポーネントのクラスで、この観察可能なデータを追跡したい：

@observer 
class Menu extends React.Component<{params?:IMenuModel[]}, {}> { 
    render() { 
    debugger 
    var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{ 
     return (<li key={item.Id}>{item.itemName}</li>) 
    }):[]; 
    return (...) 

しかしのparamsは「未定義」です。私はmobx &についてのチュートリアルを見ていましたが、それを解決できませんでした。

、ここApp.tsxファイル：

import menuCodes from './components/Codes'; 
class App extends React.Component<null, null> { 
    render() { 
    return (
     <div className="App"> 
     <Menu params = {asd.menuItems}/> 
     </div> 
    ); 
    } 
} 
export default App; 

Answer 1

はMenuRepo instanceofはasdているのですか？最初のレンダリングでは、menuItemsは未定義になります。フェッチが解決された後の最初の値であるため、2番目のレンダリングが生成されるはずです。

Appは、menuItemsを参照するものとしてobserverである必要があります。 （詳細については：https://mobx.js.org/best/react.html）