«Объект может быть определен» в течение наблюдаемого поля

Question

Получить данные и установить obseravble массив, вот код ниже:

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

Это ошибка, характерная для машинописного текста.

Ваш params опоры в вашем Menu компоненте не является обязательным. Итак, я предполагаю, что в вашем MenuCodes компоненте, menuCodes.menuItems может быть undefined время от времени.

Если отображение над this.props.params, и оно может быть определено в какой-то момент, вам необходимо включить условный в назначении вашего menuJSX переменной для учета при menuCodes.menuItems (и, таким образом, props.params) является undefined.

Что-то вроде этого троичного:

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