データを取得し、obseravbleアレイを設定観察フィールドの中

Question

「オブジェクトはおそらく未定義である」、ここで以下のコードは次のとおり

import {observable} from 'mobx'; 

export interface IMenuModel{ 
    Id:number 
    itemName:string; 
    parentId?:number;  
} 
class MenuRepo { 
    @observable menuItems? : IMenuModel[]; 
    constructor(){ 
    } 
    getItems():void { 
    fetch(`..`).then((response: Response): Promise<{ value:IMenuModel[] }> => { 
       return response.json(); 
      }) 
      .then((response: { value: IMenuModel[] }) : void => { 
       this.menuItems = response.value; 

     }, (error: any): void => { 
     //exception handling 
     }); 
    } 
} 

var menuCodes = new MenuRepo 
export default menuCodes; 

これは、観察者のクラスです。

import * as React from 'react'; 
import {observer} from 'mobx-react'; 
import {IMenuModel} from './Codes'; 

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

はまた、私は上記のエラー（「this.props.paramsは」赤下線）に遭遇：Object is possibly 'undefined'

couldntのは...それを修正する方法を把握し、これは主成分です。

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

Answer 1

これはTypescript固有のエラーです。

Menuのparams小道具はオプションです。だから、あなたのMenuCodesコンポーネントでmenuCodes.menuItemsがundefinedになることがあります。あなたはthis.props.paramsの上にマッピングされ、そしてそれはいくつかの点で不定になることがあり

場合は、menuCodes.menuItems（したがってprops.params）がundefinedのときのためにアカウントにmenuJSX変数の割り当ての条件を含める必要があります。

この三ような何か：

const { params } = this.props 
var menuJSX : JSX.Element[] = params 
    ? params.map((item:IMenuModel, i:number) => 
    <li key={item.Id}>{item.itemName}</li> 
) 
    : [];