可观察字段中的“对象可能未定义”答案

【问题标题】："Object is possibly undefined" in for observable field可观察字段中的“对象可能未定义”
【发布时间】：2017-02-17 15:27:03
【问题描述】：

检索数据并设置可观察数组，代码如下：

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'

不知道如何修复它..这是主要组件；

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

【问题讨论】：

标签： reactjs typescript mobx mobx-react

【解决方案1】：

我认为这是 Typescript 特有的错误。

Menu 组件中的 params 属性是可选的。所以，我假设在您的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>
  )
  : [];

【讨论】：