여기 아래 코드,

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; 

는 또한 I는 ("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> 
) 
    : [];