"对象可能未定义"在可观察的领域

时间:2017-02-17 15:27:04

标签: reactjs typescript mobx mobx-react

检索数据并设置obseravble数组,下面是代码:

let sliders = document.querySelectorAll('.eqSlider');

for (let slider of Array.from(sliders)) {
    console.log(slider.outerHTML); // or whatever values you want.
    slider.resize();
}

这是观察者类;

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;

我也遇到上面的错误(&#34; this.props.params&#34;带下划线的红色):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;

无法解决如何修复它......这是主要组成部分;

Object is possibly 'undefined'

1 个答案:

答案 0 :(得分:5)

我相信这是一个特定于Typescript的错误。

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>
  )
  : [];