reactjs – 可观察字段中的“对象可能未定义”

发布时间：2020-12-15 16:19:24 所属栏目：百科来源：网络整理

导读：检索数据并设置obseravble数组,这里的代码如下： import {observable} from 'mobx';export interface IMenuModel{ Id:number itemName:string; parentId?:number; } class MenuRepo { @observable menuItems? : IMenuModel[]; constructor(){ } getItems():v

检索数据并设置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”下划线红色)：对象可能是“未定义的”

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

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

解决方法

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

菜单组件中的params prop是可选的.所以,我假设在您的MenuCodes组件中,menuCodes.menuItems有时可能未定义.

如果您要映射this.props.params,并且在某些时候可能未定义,则需要在menuJSX变量的赋值中包含一个条件,以便在menuCodes.menuItems(以及props.params)未定义时进行说明.

像这三元的东西：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!